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

Dann müssen wir zwei Rückruffunktionen, success und fail, in der Vue-Instanz konfigurieren:

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

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.

Auf diese Weise wird die Funktion zum Auswählen und Hochladen von Bildern in Uniapp realisiert.

Bilder hochladen und die Rückgabeergebnisse erhalten

Beim Hochladen von Bildern müssen wir die Ergebnisse nach dem Hochladen vom Backend erhalten Der Upload ist erfolgreich, sodass Sie die URL-Adresse des hochgeladenen Bildes oder andere Bild-Upload-Informationen erhalten können.

In der Schnittstelle uni.uploadFile fügen wir einen Parameter in der Erfolgsrückruffunktion hinzu, um das vom Backend zurückgegebene Ergebnis zu erhalten, nachdem der Upload erfolgreich war. Der geänderte Code lautet wie folgt:

rrreee

Im obigen Code drucken wir die vom Server zurückgegebenen Daten in success. #🎜🎜##🎜🎜# 2. Implementierung der Bildlöschung #🎜🎜##🎜🎜# In unserer Anwendung müssen wir manchmal hochgeladene Bilder löschen, was Speicherplatz sparen und den Zweck der Optimierung des Programms erreichen kann viele API-Schnittstellen zur Implementierung dieser Funktion. Nachfolgend sind zwei Methoden aufgeführt: #🎜🎜##🎜🎜##🎜🎜#Verwenden Sie die Methode uni.removeSavedFile, um Bilder zu löschen Wenn das Foto heruntergeladen oder von der App selbst aufgenommen wurde, löschen Sie das Foto mit uni.removeSavedFile aus dem App-Verzeichnis oder Speicher. #🎜🎜##🎜🎜#Definieren Sie zunächst die Löschmethode: #🎜🎜#rrreee#🎜🎜#Verwenden Sie die Löschmethode in der Komponente: #🎜🎜#rrreee#🎜🎜#In diesem Code verwenden wir v in der Liste Komponente Der Befehl -for ruft die Informationen der Bilder ab, die nacheinander gelöscht werden sollen, und die Methode deleteImage wird zum Löschen der entsprechenden Dateien verwendet. #🎜🎜##🎜🎜##🎜🎜#Eine Löschanforderung an den Server initiieren#🎜🎜##🎜🎜##🎜🎜#Wenn Sie in unserer Anwendung Bilder auf dem Server verwenden, können Sie diese mit „Senden an“ verwenden Der Server löscht das Bild mit einer Löschanforderung. Der Unterschied zwischen dieser Methode und der Verwendung der Methode uni.removeSavedFile besteht darin, dass wir eine Anfrage an den Server senden und das Bild im Hintergrund löschen müssen. #🎜🎜##🎜🎜#Definieren Sie die Löschmethode: #🎜🎜#rrreee#🎜🎜#Auf diese Weise senden wir eine Löschanforderung an den Server. Nachdem das Backend diese Anforderung erhalten hat, kann es die entsprechenden Daten löschen. #🎜🎜##🎜🎜# 3. Zusammenfassung #🎜🎜##🎜🎜# Die oben genannten sind die beiden Möglichkeiten, die Funktionen zum Hochladen und Löschen von Bildern in Uniapp zu implementieren. In praktischen Anwendungen können wir je nach tatsächlichem Bedarf auswählen, um perfekte Funktionen zum Hochladen und Löschen von Bildern im Programm zu erreichen. Gleichzeitig können wir während der Nutzung auch bessere Leistungsmethoden anwenden, um eine bessere Programmleistung zu erzielen. #🎜🎜#

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!