uni——原生多图上传（未测试）

案例说明

在UniApp中实现多图上传功能，并包括点击图片删除和点击图片更新的功能，步骤如下：

1. 在UniApp项目中创建一个页面或组件，用于展示上传按钮、已选择的图片和操作按钮。
2. 在页面或组件的模板中添加一个按钮，用于触发选择图片的操作。可以使用<input type=“file” multiple @change=“handleFileChange”>来创建一个文件选择输入框，并通过@change事件绑定一个方法来处理文件选择。
3. 在页面或组件的脚本中，实现handleFileChange方法来处理文件选择事件。在该方法中，可以通过event.target.files获取到用户选择的文件列表。
4. 使用uni.uploadFile方法来上传选中的图片。遍历文件列表，对每个文件调用uni.uploadFile方法进行上传。可以使用Promise.all来处理多个上传请求的并行执行。
5. 在上传成功的回调函数中，可以处理上传成功后的逻辑，比如展示上传成功的图片或进行其他操作。同时，为每个上传成功的图片添加删除和更新的操作按钮。
6. 实现点击图片删除和点击图片更新的功能。为每个图片添加点击事件处理函数，通过点击事件的参数可以获取到对应的图片信息。在点击事件处理函数中，可以执行删除图片的操作或者触发更新图片的操作。

案例代码展示

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

上述示例中的your-upload-url需要替换为你实际的图片上传接口地址。此外，还可以根据需要进行样式和逻辑的调整。希望这可以帮助你实现UniApp中的多图上传功能，并包括点击图片删除和点击图片更新的功能。