Parlons des opérations de téléchargement et de suppression de photos d'Uniapp

Ces dernières années, Uniapp est devenue le premier choix de plus en plus de développeurs dans le domaine du développement d'applications mobiles. Uniapp est un nouveau cadre de développement grâce auquel les développeurs peuvent développer des applications multiterminaux, améliorant ainsi l'efficacité du développement des ingénieurs. Cet article fournira une introduction détaillée et une explication des opérations de téléchargement et de suppression de photos d'Uniapp.

1. Implémentation du téléchargement d'images

La sélection de caméras et d'images est l'une des fonctions courantes. Uniapp fournit une interface API riche, qui permet la sélection et la sélection d'images via des caméras, des albums photo, des moments WeChat, des fichiers en ligne, etc. possible. Ci-dessous, nous présenterons en détail comment l'interface API d'Uniapp implémente la fonction de téléchargement d'images.

1. Sélectionnez des images et téléchargez-les

Uniapp fournit un composant très facile à utiliser, uni-upload, qui peut télécharger des fichiers de manière asynchrone. Ensuite, la fonction de sélection des images à télécharger est implémentée via uni-upload.

Ajoutez d'abord le code suivant sur la page front-end :

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

Dans ce code, nous définissons un composant uni-upload, où l'attribut upload-url est l'adresse URL de téléchargement de l'image, on-success et on-fail correspondent respectivement aux fonctions de rappel pour le succès et l'échec du téléchargement. L'attribut @click déclenche la fonction de téléchargement après avoir cliqué. 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);
      }
    });
  }
}

Copier après la connexion
2. Dans ce code, nous définissons d'abord successIl existe deux fonctions de rappel code> et fail. Lorsque le téléchargement réussit ou échoue, la fonction de rappel correspondante sera exécutée. Dans la fonction upload, nous utilisons la méthode uni.chooseImage pour sélectionner l'image, obtenons le chemin du fichier temporaire et utilisons la méthode uni.uploadFile pour télécharger le fichier sur le serveur. L'attribut name représente la valeur de clé correspondant au fichier, c'est-à-dire le nom du paramètre du fichier reçu sur le serveur.

Téléchargez des images et obtenez les résultats renvoyés

rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!