vue实现上传文件夹

在Vue中实现上传文件夹需要用到HTML5的File API，具体步骤如下：

1. 在模板中添加一个文件上传input标签，并设置multiple和webkitdirectory属性，让用户能够上传文件夹：

<template>
  <div>
    <input type="file" ref="fileInput" multiple webkitdirectory @change="handleFolderUpload">
  </div>
</template>

2. 在Vue实例中编写handleFolderUpload方法，通过FileReader API读取文件夹中的所有文件，并将它们添加到一个FormData对象中：

export default {
  methods: {
    handleFolderUpload() {
      const files = this.$refs.fileInput.files;
      const formData = new FormData();
      const reader = new FileReader();
      const folderName = files[0].webkitRelativePath.split('/')[0]; // 文件夹的名称

      // 读取文件夹中的所有文件
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileName = file.webkitRelativePath.split('/').pop(); // 文件名称
        reader.readAsArrayBuffer(file);
        reader.onload = e => {
          const arrayBuffer = e.target.result;
          const blob = new Blob([arrayBuffer]);
          formData.append(`${folderName}/${fileName}`, blob, fileName);
        };
      }

      // 上传FormData对象
      axios.post('/upload', formData).then(response => {
        console.log(response.data);
      });
    }
  }
}

3. 在后端代码中处理文件上传请求，将FormData对象中的所有文件保存到服务器上。

需要注意的是，由于上传文件夹操作可能会上传大量的文件，因此可能会导致上传时间较长或者服务器压力较大，在实际使用中需要进行相关的优化和限制。