vue3前端实现多个图片一起上传前端代码

在 Vue3 中实现多个图片同时上传，可以利用 HTML5 的 File API 和 Vue 的双向数据绑定以及事件监听功能。以下是一个简单的示例：

<template>
  <div>
    <input type="file" @change="uploadFiles" multiple />
    <button v-if="files.length > 0">开始上传</button>
    <ul v-if="uploads">
      <li v-for="(item, index) in uploads" :key="index">
        {{ item.name }} - {{ item.progress + '%' }}
        <span class="progress">{{ item.progressBar }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      uploads: [],
    };
  },
  methods: {
    uploadFiles(e) {
      this.files = e.target.files;
      if (this.files.length) {
        for (const file of this.files) {
          const formData = new FormData();
          formData.append('file', file);
          const uploadTask = axios.post('/api/upload', formData, {
            onUploadProgress: (progressEvent) => {
              // 更新进度条信息
              const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
              this.uploads.push({ name: file.name, progress, progressBar: '... ' + progress });
            },
          });
          uploadTask.then((response) => {
            // 成功后处理响应数据
            console.log(response.data);
            // 这里可以根据需要清除上传任务
            this.uploads.pop(); // 或者添加其他操作
          })
          .catch((error) => {
            // 错误处理
            console.error(error);
          });
        }
      }
    },
  },
};
</script>

<style scoped>
.progress-bar {
  width: 20px; /* 根据实际需求调整宽度 */
  height: 100%;
  background-color: #ccc;
}
</style>

在这个例子中，用户选择多个文件后，`uploadFiles` 方法会被触发，它会遍历每个选中的文件并创建一个新的 `FormData` 对象。然后使用 Axios 发起 POST 请求，并监听上传进度。每次进度变化都会更新组件的状态，展示进度条。

注意这只是一个基础示例，实际应用中可能还需要考虑错误处理、断点续传等复杂情况。同时，你需要将 `/api/upload` 替换为你实际的后端接口地址。