Uniappの写真のアップロードと削除の操作について話しましょう-uni-app-php.cn

Uniappの写真のアップロードと削除の操作について話しましょう

PHPz

リリース： 2023-04-18 15:18:06

オリジナル

1480 人が閲覧しました

近年、モバイルアプリケーション開発の分野で、Uniapp が最初の選択肢となる開発者がますます増えています。 Uniappは、開発者がマルチ端末アプリケーションを開発できる新しい開発フレームワークであり、エンジニアの開発効率を向上させます。この記事では、Uniapp の写真のアップロードと削除の操作について詳しく紹介し、説明します。

1. 画像アップロードの実装

カメラと画像の選択は一般的な機能の 1 つであり、Uniapp はカメラ、フォトアルバム、WeChat モーメント、オンラインファイルなどを有効にするための豊富な API インターフェイスを提供します。画像を選択してアップロードするには複数の方法が可能です。以下では、Uniapp の API インターフェイスが画像アップロード機能を実装する方法を詳しく紹介します。

写真を選択してアップロード

Uniapp には、ファイルを非同期でアップロードし、uni-upload を通じて選択できる非常に使いやすいコンポーネント uni-upload が用意されています。画像アップロード機能。

まず、次のコードをフロントエンドページに追加します。

<view>
   <uni-upload :upload-url="&#39;your_upload_url&#39;" :on-success="success" :on-fail="fail" @click="upload">
     <view class="button">上传图片</view>
   </uni-upload>
</view>

ログイン後にコピー

このコードでは、uni-upload コンポーネントを定義します。 url 属性は画像アップロードの URL アドレスで、on-success と on-fail はアップロード成功と失敗のコールバック関数にそれぞれ対応します。 @clickこの属性は、クリック後にアップロード機能をトリガーします。

次に、Vue インスタンスで 2 つのコールバック関数

success と fail を設定する必要があります。

methods: {
   success(res){
     console.log("上传成功");
   },
   fail(err){
     console.log("上传失败");
   },
   upload(){
     uni.chooseImage({
       sizeType: ['compressed'],
       sourceType: ['album', 'camera'],
       success: (res) => {
         const tempFilePaths = res.tempFilePaths;
         uni.uploadFile({
           url: this.uploadUrl,
           filePath: tempFilePaths[0],
           name: 'file',
           success: (res) => {
            this.success(res)
           },
           fail: (err) => {
            this.fail(err)
           }
         });
       }
     });
   }
}

ログイン後にコピー

このコードでは、まず There を定義します。は 2 つのコールバック関数、

success と fail です。アップロードが成功または失敗すると、対応するコールバック関数が実行されます。 upload 関数では、uni.chooseImage メソッドを使用して画像を選択し、一時ファイルのパスを取得し、uni.uploadFile メソッドを使用してファイルをサーバーにアップロードします。 name 属性は、ファイルに対応するキー値、つまりサーバーで受信したファイルのパラメータ名を表します。

これは、Uniapp に写真を選択してアップロードする機能を実装します。

画像をアップロードするプロセスでは、アップロードが成功した後にバックエンドから返される結果を取得する必要があります。アップロード画像の URL アドレスまたはその他の画像アップロード情報を取得できます。

uni.uploadFile インターフェイスでは、アップロードが成功した後にバックエンドによって返される結果を受け取るためのパラメータを成功コールバック関数に追加します。変更されたコードは次のとおりです。

methods: {
   success(res){
     const data = res.data;
     console.log(data);
     console.log("上传成功");
   },
   fail(err){
     console.log("上传失败");
   },
   upload(){
     uni.chooseImage({
       sizeType: ['compressed'],
       sourceType: ['album', 'camera'],
       success: (res) => {
         const tempFilePaths = res.tempFilePaths;
         uni.uploadFile({
           url: this.uploadUrl,
           filePath: tempFilePaths[0],
           name: 'file',
           success: (res) => {
            this.success(res);
           },
           fail: (err) => {
            this.fail(err);
           }
         });
       }
     });
   }
}

ログイン後にコピー

上記のコードでは、

success でサーバーから返されたデータを出力します。

2. 画像削除の実装

私たちのアプリケーションでは、ストレージ容量を節約し、プログラムを最適化するという目的を達成するために、アップロードされた画像を削除する必要がある場合があります。Uniapp は多くの API インターフェイスを提供しますこの機能を実装するには。以下に 2 つの方法を示します。

この方法では、アプリケーションで使用されている写真がダウンロードされるか、アプリケーションによって撮影されます。それ自体を削除するには、uni.removeSavedFile を使用してアプリケーションディレクトリまたはメモリから写真を削除します。

最初に削除メソッドを定義します:

methods:{
  deleteImage(index) {
    const filePath = this.uploadList[index].filePath;
    uni.removeSavedFile({
      filePath: filePath,
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    });
  }
}

ログイン後にコピー

コンポーネントで削除メソッドを使用します:

<view v-for="(item,index) in uploadList" :key="index">
    <image :src="item.filePath" mode="aspectFit" style="width:50px;height:50px"></image>
    <view v-on:click="deleteImage(index)">删除</view>
</view>

ログイン後にコピー

このコードでは、リストコンポーネントで v-for 命令を使用して、削除するイメージに関する情報を取得するには、

deleteImage メソッドを使用して、対応するファイルを削除します。

このアプリケーションでは、サーバー上の画像を使用している場合、サーバーに削除リクエストを送信することで画像を削除できます。。写真。このメソッドと uni.removeSavedFile メソッドの使用の違いは、サーバーにリクエストを送信し、バックグラウンドで画像を削除する必要があることです。

削除メソッドの定義:

methods:{
  deleteImage(index) {
    const url = 'your_delete_url';
    const fileID = this.uploadList[index].url;
    uni.request({
      url: url,
      method: 'DELETE',
      data:{
        fileID:fileID,
        key:'value'  // 可以添加其他参数
      },
      success: (res) => {
        console.log(res);
      },
      fail: (err) => {
        console.log(err);
      }
    });
  }
}

ログイン後にコピー

このようにして、サーバーに削除リクエストを送信し、バックエンドがこのリクエストを受信すると、サーバー内の該当するデータを削除できます。

3. 概要

上記は、Uniapp で画像のアップロードと削除機能を実装する 2 つの方法です。実際のアプリケーションでは、実際のニーズに応じて選択して、プログラム内で完璧な画像のアップロードおよび削除機能を実現できます。同時に、使用中により優れたパフォーマンス手法を採用して、プログラムのパフォーマンスを向上させることもできます。

以上がUniappの写真のアップロードと削除の操作について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。