vue3图片上传多张

在Vue 3中实现多张图片上传可以使用以下方法：

方法一：使用Vue的表单数据绑定和File API。

1. 在Vue组件中，创建一个data属性来存储上传的图片文件。例如，可以创建一个名为`images`的数组属性。

2. 在模板中使用`<input type="file" multiple>`来实现多文件选择。

3. 监听文件选择事件，将选中的文件添加到`images`数组中。

4. 使用`v-for`指令在模板中循环渲染`images`数组，显示已选择的图片。

5. 当用户点击提交按钮时，可以将`images`数组中的文件上传到服务器。

以下是一个简单的示例代码：

<template>
  <div>
    <input type="file" multiple @change="handleFileChange">
    <div v-for="image in images" :key="image.name">
      <img :src="image.url" alt="uploaded image">
    </div>
    <button @click="uploadImages">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    handleFileChange(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const url = URL.createObjectURL(file);
        this.images.push({ name: file.name, url });
      }
    },
    uploadImages() {
      // TODO: 实现图片上传逻辑
    }
  }
};
</script>

方法二：使用第三方库，如Vue File Agent。

1. 安装Vue File Agent库。

npm install vue-file-agent

2. 在Vue组件中导入和注册Vue File Agent。

import VueFileAgent from 'vue-file-agent';
import 'vue-file-agent/dist/vue-file-agent.css';

export default {
  components: {
    VueFileAgent
  },
  // ...
};

3. 在模板中使用Vue File Agent组件实现多张图片上传功能。

<template>
  <div>
    <vue-file-agent multiple @change="handleFileChange">
      <button slot="browse">选择图片</button>
    </vue-file-agent>
    <div v-for="image in images" :key="image.id">
      <img :src="image.url" alt="uploaded image">
    </div>
    <button @click="uploadImages">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    handleFileChange(files) {
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const url = URL.createObjectURL(file);
        this.images.push({ id: file.id, url });
      }
    },
    uploadImages() {
      // TODO: 实现图片上传逻辑
    }
  }
};
</script>

以上是两种在Vue 3中实现多张图片上传的方法，您可以根据自己的需求选择适合的方法进行开发。希望对您有帮助！