uniapp怎么实现多图上传

UniApp 可以使用 vue 的语法实现多图上传功能。

具体实现方法如下：

1. 使用 input 标签选择图片，设置 multiple 属性为 true，以便选择多张图片。

<template>
  <view>
    <input type="file" ref="fileInput" @change="uploadImage" multiple />
  </view>
</template>

2. 在 methods 中定义 uploadImage 方法，获取选择的图片文件，并使用 forEach 循环遍历图片数组。

<script>
export default {
  methods: {
    async uploadImage() {
      const files = this.$refs.fileInput.files;
      Array.from(files).forEach(async file => {
        // 上传图片代码
      });
    }
  }
};
</script>

3. 在 forEach 循环内部，可以使用 axios、uni.uploadFile 等方法上传图片到服务器。

以下为使用 uni.uploadFile 的代码示例：

Array.from(files).forEach(async file => {
  const formData = new FormData();
  formData.append("file", file);
  try {
    const res = await uni.uploadFile({
      url: "YOUR_UPLOAD_URL",
      filePath: file.path,
      name: "file",
      formData
    });
    console.log(res);
  } catch (error) {
    console.error(error);
  }
});

完整代码如下：

<template>
  <view>
    <input type="file" ref="fileInput" @change="uploadImage" multiple />
  </view>
</template>

<script>
export default {
  methods: {
    async uploadImage() {
      const files = this.$refs.fileInput.files;
      Array.from(files).forEach(async file => {
        const formData = new FormData();
        formData.append("file", file);
        try {
          const res = await uni.uploadFile({
            url: "YOUR_UPLOAD_URL",
            filePath: file.path,
            name: "file",
            formData
          });
          console.log(res);
        } catch (error) {
          console.error(error);
        }
      });
    }