uni - native multi-image upload (untested)

Case Description

To implement the multi-image upload function in UniApp, including the functions of clicking on the image to delete and clicking on the image to update, the steps are as follows:

1. Create a page or component in the UniApp project to display the upload button, the selected image and the action button.
2. Add a button to the template of the page or component to trigger the operation of selecting an image. You can use <input type="file" multiple @change="handleFileChange"> to create a file selection input box, and bind a method to handle file selection through the @change event.
3. In the script of the page or component, implement the handleFileChange method to handle the file selection event. In this method, the list of files selected by the user can be obtained through event.target.files.
4. Use the uni.uploadFile method to upload the selected image. Traverse the file list and call the uni.uploadFile method for each file to upload. Promise.all can be used to handle parallel execution of multiple upload requests.
5. In the upload success callback function, you can process the logic after the upload is successful, such as displaying the uploaded pictures or performing other operations. At the same time, add delete and update operation buttons for each successfully uploaded image.
6. Realize the function of clicking the picture to delete and clicking the picture to update. Add a click event processing function for each picture, and the corresponding picture information can be obtained through the parameters of the click event. In the click event processing function, you can perform the operation of deleting the picture or trigger the operation of updating the picture.

Case code display

<template>
  <view>
    <button @click="chooseImages">选择图片</button>
    <view v-for="(image, index) in uploadedImages" :key="index">
      <image :src="image.url" mode="aspectFit" @click="handleImageClick(index)"></image>
      <button @click="deleteImage(index)">删除</button>
      <button @click="updateImage(index)">更新</button>
    </view>
  </view>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      uploadedImages: []
    };
  },
  methods: {
      
      
    chooseImages() {
      
      
      uni.chooseImage({
      
      
        count: 5, // 最多可选择的图片数量
        success: (res) => {
      
      
          const files = res.tempFiles;
          this.uploadImages(files);
        }
      });
    },
    uploadImages(files) {
      
      
      const uploadPromises = files.map((file) => {
      
      
        return new Promise((resolve, reject) => {
      
      
          uni.uploadFile({
      
      
            url: 'your-upload-url',
            filePath: file.path,
            name: 'file',
            success: (res) => {
      
      
              const data = JSON.parse(res.data);
              resolve(data);
            },
            fail: (err) => {
      
      
              reject(err);
            }
          });
        });
      });

      Promise.all(uploadPromises)
        .then((results) => {
      
      
          this.uploadedImages = results;
        })
        .catch((error) => {
      
      
          console.error(error);
        });
    },
    handleImageClick(index) {
      
      
      // 处理点击图片的逻辑，可以根据索引获取对应的图片信息
      console.log('点击了第', index, '张图片');
    },
    deleteImage(index) {
      
      
      // 处理删除图片的逻辑，可以根据索引删除对应的图片信息
      this.uploadedImages.splice(index, 1);
    },
    updateImage(index) {
      
      
      // 处理更新图片的逻辑，可以根据索引更新对应的图片信息
      console.log('更新第', index, '张图片');
    }
  }
};
</script>

The your-upload-url in the above example needs to be replaced with your actual image upload interface address. In addition, style and logic adjustments can be made as needed. Hope this can help you realize the multi-image upload function in UniApp, and include the functions of clicking image deletion and clicking image update.