上传文件vue3代码实现

在Vue3中，上传文件通常通过`<input type="file">`元素结合事件监听和axios等库来进行。这里是一个基础的实现示例：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFiles">开始上传</button>
    <p v-if="files.length">{{ files.length }} 文件已选中</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
    };
  },
  methods: {
    handleFileUpload(e) {
      e.preventDefault(); // 阻止默认提交表单的行为
      const selectedFiles = e.target.files;
      this.files = Array.from(selectedFiles);
    },
    async uploadFiles() {
      if (this.files.length === 0) return;

      for (const file of this.files) {
        try {
          const formData = new FormData();
          formData.append('file', file);

          await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } });
          console.log(`文件 ${file.name} 已上传`);
        } catch (error) {
          console.error('上传失败:', error);
        }
      }

      this.files = []; // 清空选择的文件列表
    },
  },
};
</script>

这个例子中，用户选择文件后会触发`handleFileUpload`方法，将选中的文件添加到组件的数据`files`里。点击“开始上传”按钮后，`uploadFiles`方法会遍历文件并发送POST请求到服务器。