uniapp 微信小程序多张图片上传

在 Uniapp 中实现微信小程序的多张图片上传，可以按照以下步骤进行操作：

1. 在页面中创建一个按钮，用于触发选择图片的操作。

2. 在按钮的点击事件中，调用 `uni.chooseImage` 方法来选择图片。这个方法会返回选择的图片的临时文件路径。

3. 将选择的图片路径保存在一个数组中。

4. 在页面中展示已选择的图片，可以使用 `v-for` 指令来遍历已选择的图片数组，使用 `uni.previewImage` 方法来预览图片。

5. 创建一个提交按钮，在点击事件中调用 `uni.uploadFile` 方法，将选择的图片上传到服务器。

下面是一个示例代码：

<template>
  <view>
    <button @tap="chooseImage">选择图片</button>
    <view v-for="(image, index) in imageList" :key="index">
      <image :src="image" mode="aspectFit" @tap="previewImage(index)" />
    </view>
    <button @tap="uploadImages">上传图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [], // 存放已选择的图片路径
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9, // 最多可以选择的图片张数
        success: (res) => {
          // 将选择的图片路径保存到 imageList 数组中
          this.imageList = res.tempFilePaths;
        },
      });
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.imageList, // 需要预览的图片路径列表
        current: this.imageList[index], // 当前显示的图片链接
      });
    },
    uploadImages() {
      // 遍历已选择的图片路径，逐个上传
      this.imageList.forEach((image) => {
        uni.uploadFile({
          url: 'https://your-upload-api-url', // 上传图片的接口地址
          filePath: image,
          name: 'file', // 上传文件对应的 key 值
          formData: {}, // 其他额外的参数
          success: (res) => {
            console.log(res.data);
          },
        });
      });
    },
  },
};
</script>

请注意替换示例代码中的上传接口地址为你自己的接口地址。另外，需要在 `manifest.json` 文件中添加相应的权限配置，以允许选择图片和上传文件。

希望这个示例对你有帮助！如果还有其他问题，请随时提问。