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

Ensuite, nous devons configurer les deux fonctions de rappel success et fail dans l'instance Vue :

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

De cette manière, la fonction de sélection d'images et de téléchargement dans Uniapp est réalisée.

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

Dans le processus de téléchargement d'images, nous devons obtenir les résultats renvoyés par le backend une fois le téléchargement réussi, afin que nous puissions obtenir l'adresse URL de l'image téléchargée ou autre informations de téléchargement d’images.

Dans l'interface uni.uploadFile, nous ajoutons un paramètre dans la fonction de rappel de réussite pour recevoir le résultat renvoyé par le backend une fois le téléchargement réussi. Le code modifié est le suivant :

rrreee

Dans le code ci-dessus, on imprime les données renvoyées par le serveur en succès. 🎜🎜2. Implémentation de la suppression d'images🎜🎜Dans notre application, nous devons parfois supprimer les images téléchargées, ce qui peut économiser de l'espace de stockage et atteindre l'objectif d'optimisation du programme. Uniapp fournit de nombreuses interfaces API pour réaliser cette fonction. Deux méthodes sont indiquées ci-dessous : 🎜🎜🎜Utilisez la méthode uni.removeSavedFile pour supprimer des images🎜🎜🎜Cette méthode consiste à télécharger ou à prendre les images utilisées dans l'application elle-même. Utilisez uni.removeSavedFile pour supprimer les images de l'application. répertoire d'application ou Supprimer de la mémoire. 🎜🎜Définissez d'abord la méthode delete : 🎜rrreee🎜Utilisez la méthode delete dans le composant : 🎜rrreee🎜Dans ce code, nous utilisons l'instruction v-for sur le composant list pour obtenir tour à tour les informations des images à supprimer, deleteImage permet de supprimer le fichier correspondant. 🎜🎜🎜Envoyer une demande de suppression au serveur🎜🎜🎜Dans notre application, si vous utilisez des images sur le serveur, vous pouvez supprimer l'image en envoyant une demande de suppression au serveur. La différence entre cette méthode et l'utilisation de la méthode uni.removeSavedFile est que nous devons envoyer une requête au serveur et supprimer l'image en arrière-plan. 🎜🎜Définir la méthode de suppression : 🎜rrreee🎜De cette façon, nous envoyons une demande de suppression au serveur Une fois que le backend a reçu cette demande, les données correspondantes sur le serveur peuvent être supprimées. 🎜🎜3. Résumé🎜🎜Ci-dessus sont les deux façons d'implémenter les fonctions de téléchargement et de suppression d'images dans Uniapp. Dans les applications pratiques, nous pouvons choisir en fonction des besoins réels pour obtenir des fonctions parfaites de téléchargement et de suppression d'images dans le programme. Dans le même temps, nous pouvons également adopter de meilleures méthodes de performance lors de l'utilisation pour obtenir de meilleures performances du programme. 🎜

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!