Let's talk about Uniapp's photo upload and delete operations

In recent years, Uniapp has become the first choice for more and more developers in the field of mobile application development. Uniapp is a new development framework through which developers can develop multi-terminal applications, thus improving the development efficiency of engineers. This article will provide a detailed introduction and explanation of Uniapp’s photo upload and delete operations.

1. Implementation of picture upload

Camera and picture selection are one of the common functions. Uniapp provides a rich API interface to enable cameras, photo albums, WeChat Moments, online files, etc. Multiple ways of selecting and uploading images are possible. Below we will introduce in detail how Uniapp's API interface implements the image upload function.

1. Select pictures and upload

Uniapp provides a very easy-to-use component, uni-upload, which can upload files asynchronously, and then select through uni-upload Image upload function.

First add the following code on the front-end page:

<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 this code, we define a uni-upload component, in which upload-url# The ## attribute is the URL address of the image upload, on-success and on-fail correspond to the callback functions for upload success and failure respectively. @clickThe attribute triggers the upload function after clicking.

Then we need to configure the two callback functions

success and fail in the Vue instance:

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

In this code, we first define There are two callback functions,

success and fail. When the upload succeeds or fails, the corresponding callback function will be executed. In the upload function, we use the uni.chooseImage method to select the image, obtain the temporary file path, and use the uni.uploadFile method to upload the file to the server. The name attribute represents the key value corresponding to the file, that is, the parameter name of the file received on the server.

This implements the function of selecting pictures and uploading them in Uniapp.

Upload pictures and get the return results

In the process of uploading pictures, we need to get the results returned by the backend after the upload is successful, so that we can get the upload The URL address of the image or other image upload information.

In the

uni.uploadFile interface, we add a parameter in the success callback function to receive the result returned by the backend after the upload is successful. The modified code is as follows:

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

In the above code, we print the data returned by the server in

success.

2. Implementation of picture deletion

In our application, sometimes we need to delete uploaded pictures, which can save storage space and achieve the purpose of optimizing the program. Uniapp provides a lot API interface to implement this function. Two methods are given below:

Use the uni.removeSavedFile method to delete pictures

This method is that the pictures used in the application are downloaded or taken by the application itself , use uni.removeSavedFile to delete photos from the application directory or memory.

First define the deletion method:

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

Use the deletion method in the component:

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

In this code, we use the v-for instruction on the list component to obtain the Information about the image to be deleted, the

deleteImage method is used to delete the corresponding file.

Initiate a deletion request to the server

In our application, if you are using images on the server, you can delete them by sending a deletion request to the server. picture. The difference between this method and using the uni.removeSavedFile method is that we need to send a request to the server and delete the image in the background.

Define deletion method:

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

In this way, we send a deletion request to the server. After the backend receives this request, the corresponding data in the server can be deleted.

3. Summary

The above are the two ways to implement the image upload and delete functions in Uniapp. In practical applications, we can choose according to actual needs to achieve perfect image upload and delete functions in the program. At the same time, we can also adopt better performance methods during use to achieve better program performance.

The above is the detailed content of Let's talk about Uniapp's photo upload and delete operations. For more information, please follow other related articles on the PHP Chinese website!