Lassen Sie uns über die Foto-Upload- und -Löschvorgänge von Uniapp sprechen

Uniapp hat sich in den letzten Jahren für immer mehr Entwickler zur ersten Wahl im Bereich der mobilen Anwendungsentwicklung entwickelt. Uniapp ist ein neues Entwicklungsframework, mit dem Entwickler Multi-Terminal-Anwendungen entwickeln und so die Entwicklungseffizienz von Ingenieuren verbessern können. In diesem Artikel werden die Foto-Upload- und -Löschvorgänge von Uniapp ausführlich vorgestellt und erläutert.

1. Implementierung des Bild-Uploads

Kamera und Bildauswahl sind eine der gängigen Funktionen, um die Kamera, das Fotoalbum oder WeChat-Momente zu aktivieren. Online-Dateien und andere Methoden zum Auswählen und Hochladen von Bildern. Im Folgenden stellen wir detailliert vor, wie die API-Schnittstelle von Uniapp die Funktion zum Hochladen von Bildern implementiert.

1. Bilder auswählen und hochladen

Uniapp bietet eine sehr einfach zu verwendende Komponente, Uni-Upload, die Dateien asynchron hochladen kann Die Funktion zum Auswählen von Bildern zum Hochladen wird durch Uni-Upload implementiert.

Fügen Sie zunächst den folgenden Code auf der Frontend-Seite hinzu:

<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>

In diesem Code definieren wir eine uni-upload-Komponente, wobei upload-url ist die URL-Adresse des Bild-Uploads. on-success und on-fail entsprechen den Rückruffunktionen für den Upload-Erfolg Scheitern bzw. Das Attribut @click löst nach dem Klicken die Upload-Funktion aus. uni-upload组件，其中upload-url属性是图片上传的URL地址，on-success和on-fail分别对应上传成功和失败的回调函数。@click属性是点击后触发上传函数。

然后我们需要在Vue实例中配置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)
           }
         });
       }
     });
   }
}

这段代码中，我们首先定义了success和fail两个回调函数，当上传成功或者失败后，就会执行相应的回调函数。在upload函数中，我们使用uni.chooseImage方法选择图片，获取到临时文件路径，并使用uni.uploadFile方法将文件上传到服务器。name属性表示文件对应的键值，即服务器上接收文件的参数名。

这样就实现了在Uniapp中选择图片并上传的功能。

2. 上传图片并获取返回结果

在上传图片的过程中，我们需要在上传成功后获取到后端返回的结果，这样可以获取到上传图片的URL地址或者其他图片上传的信息。

在uni.uploadFile这个接口中，我们在success回调函数中增加一个参数，用来接收上传成功后后端返回的结果。修改后的代码如下：

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中打印了服务器返回的数据。

二、图片删除的实现

在我们的应用程序中，有时候需要删除已经上传的图片，这样可以节省存储空间并达到优化程序的目的，Uniapp提供了很多API接口来实现这个功能。下面给出两种方式：

1. 使用uni.removeSavedFile方法删除图片

这种方式是在应用中使用的图片是由应用自己下载或拍摄的，使用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

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);
      }
    });
  }
}

Nach dem Login kopieren
2. This Code haben wir zunächst zwei Rückruffunktionen definiert: success und fail. Wenn der Upload erfolgreich ist oder fehlschlägt, wird die entsprechende Rückruffunktion ausgeführt. In der Funktion upload verwenden wir die Methode uni.chooseImage, um das Bild auszuwählen, den temporären Dateipfad abzurufen und verwenden die Methode uni.uploadFile, um die Datei auf den Server hochzuladen. Das Attribut name stellt den Schlüsselwert dar, der der Datei entspricht, dh den Parameternamen der auf dem Server empfangenen Datei.

Bilder hochladen und die Rückgabeergebnisse erhalten

rrreee

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Foto-Upload- und -Löschvorgänge von Uniapp sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!