vue怎么在不借助组件的情况下批量上传文件

Vue 中批量上传文件通常通过原生 HTML 的 `<input type="file">` 元素配合 JavaScript 来实现，不需要依赖 Vue 的自定义组件。下面是一个简单的示例，展示如何在不使用组件的情况下实现批量文件上传：

1. 首先，在HTML中创建一个用于选择文件的输入框：

<input type="file" id="batch-file-input" multiple />
<button @click="uploadFiles">开始上传</button>
<div v-if="filesBeingUploaded.length > 0">{{ filesBeingUploaded.length }} 文件正在上传...</div>
<ul v-if="filesUploaded.length > 0">
  <li v-for="file in filesUploaded" :key="file.name">{{ file.name }} - {{ file.status }}</li>
</ul>

2. 在JavaScript中编写Vue实例，并添加相应的处理函数：

// 创建一个新的Vue实例
new Vue({
  el: '#app',
  data() {
    return {
      filesBeingUploaded: [], // 存储正在上传的文件
      filesUploaded: [] // 存储已上传成功的文件
    };
  },
  methods: {
    uploadFiles() {
      const input = document.getElementById('batch-file-input');
      const files = input.files;

      // 遍历文件列表，开始逐个上传
      for (let i = 0; i < files.length; i++) {
        this.uploadSingleFile(files[i]);
      }
    },
    uploadSingleFile(file) {
      const formData = new FormData();
      formData.append('file', file);

      fetch('your-api-url', {
        method: 'POST',
        body: formData,
        onUploadProgress(e) {
          const percentDone = Math.round((e.loaded / e.total) * 100);
          this.filesBeingUploaded.push({ name: file.name, status: `${percentDone}%` });
        },
        // 当请求完成时回调
        onload: function(response) {
          if (response.ok) {
            this.filesUploaded.push({ name: file.name, status: '已完成' });
            // 清除正在进行的上传
            this.filesBeingUploaded = this.filesBeingUploaded.filter(file => file !== this.lastUploadedFile);
          }
        },
        // 错误处理
        error: function(error) {
          console.error('Error uploading file:', error);
        }
      }).then(response => response.json()).catch(error => console.error('Error:', error));
    },
    lastUploadedFile() {
      return this.filesBeingUploaded[this.filesBeingUploaded.length - 1];
    }
  }
});

在这个例子中，我们使用 `fetch` 发起POST请求上传每个文件，并在上传过程中更新 `filesBeingUploaded`。当上传完成后，我们会将文件状态标记为已完成并移除当前上传的文件，直到所有文件都被上传完。