Vue上传文件夹的实现

一、上传文件夹基本流程

在Vue中，上传文件夹的基本流程如下：

1. 用户在页面中选择要上传的文件夹；

2. 将该文件夹中的所有文件进行遍历；

3. 将遍历出来的每个文件使用 formData 对象进行处理；

4. 把所有处理好的 formData 对象上传到服务器。

二、选择要上传的文件夹

在Vue中，我们可以使用HTML表单中的 input 标签来实现对文件夹的选择。具体代码如下：

  <template>
    <input type="file" webkitdirectory directory multiple @change="handleFileSelect">
  </template>

  <script>
    export default {
      methods: {
        handleFileSelect(event) {
          // 处理选择的文件夹
        }
      }
    }
  </script>

在这段代码中，我们使用了 input 标签，并且设置了 webkitdirectory 和 directory 属性，表示可以选择文件夹。同时也设置了 multiple 属性，表示可以选择多个文件。

当用户选择完文件夹后，会触发 change 事件，我们在 handleFileSelect 方法中可以处理选择的文件夹。

三、遍历文件夹中的所有文件

文件夹中有可能包含其他文件夹，所以我们需要使用递归的方式来遍历这些文件夹。具体代码如下：

  function traverseFiles(files, formData) {
    for (let i = 0, len = files.length; i < len; i++) {
      const file = files[i];

      if (file.isDirectory()) {
        traverseFiles(file, formData);
      } else {
        formData.append("files[]", file);
      }
    }
  }

  function handleFileSelect(event) {
    const formData = new FormData();
    const files = event.target.files;
    
    traverseFiles(files, formData);

    // 把 formData 对象上传到服务器
  }

在这段代码中，我们定义了 traverseFiles 函数，它有两个参数：files 和 formData。其中，files 代表要遍历的文件夹，formData 代表最终要上传到服务器的 formData 对象。

在 traverseFiles 函数中，我们使用了 for 循环来遍历每个文件。如果文件是文件夹，就递归调用 traverseFiles 函数。如果文件不是文件夹，就把它添加到 formData 对象中。

在 handleFileSelect 函数中，我们通过 event.target.files 获取到用户选择的所有文件和文件夹。然后我们调用 traverseFiles 函数来遍历这些文件夹并将其添加到 formData 对象中，最后再把 formData 对象上传到服务器。

四、使用formData对象处理每个文件

在上传文件时，我们需要把文件存储到 formData 对象中，并且给每个文件设置一个 name 和一个 type。具体代码如下：

  function traverseFiles(files, formData) {
    for (let i = 0, len = files.length; i < len; i++) {
      const file = files[i];

      if (file.isDirectory()) {
        traverseFiles(file, formData);
      } else {
        const name = file.webkitRelativePath || file.name;
        formData.append("files[]", file, name);
      }
    }
  }

在这段代码中，我们使用了 webkitRelativePath 属性来设置每个文件的 name。这样我们上传到服务器时，可以通过这个 name 来区分每个文件。同时，我们还使用了 file.name 属性来设置每个文件的 type。

五、上传文件夹到服务器

我们使用 axios 库来上传 formData 对象到服务器。具体代码如下：

  function uploadFormData(formData) {
    axios.post("/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    })
    .then(response => {
      // 处理上传成功后的逻辑
    })
    .catch(error => {
      // 处理上传失败后的逻辑
    });
  }

在这段代码中，我们使用了 axios.post 方法来上传 formData 对象到服务器。同时，我们还设置了 headers 的 Content-Type 为 multipart/form-data，这样服务器就能够正确地解析 formData 对象。

总结

上述就是Vue上传文件夹的实现方法。其中，我们主要是对选择文件夹、遍历文件夹、处理每个文件和上传到服务器四个方面进行了详细的阐述。如果你想在Vue中上传文件夹，上述代码示例可以帮助你实现此功能。

 

参考文章：http://blog.ncmem.com/wordpress/2023/12/20/vue%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9%e7%9a%84%e5%ae%9e%e7%8e%b0/

欢迎入群一起讨论