vue上传文件夹目录

在input上面添加webkitdirectory directory这两个属性就能开启选择目录模式

<input ref="fileIptRef" class="file-ipt" type="file" webkitdirectory directory multiple @change="handleFileSelect"/>
// 文件上传输入框的ref
const fileIptRef: any = ref(null);

// 加工文件
const traverseFiles = (files: any) => {
  for (let i = 0, len = files.length; i < len; i++) {
    const file = files[i];
    const formData = new FormData();
    // 定义上传文件的参数
    formData.append("file", file);
    formData.append("fromPath", file.webkitRelativePath);
    uploadFormData(formData);
  }
};

// 获取当前选中的文件夹数据
const handleFileSelect = (event: any) => {
  const files = event.target.files;
  traverseFiles(files);
};

// 文件上传
const uploadFormData = (formData: any) => {
  // 文件上传地址
  const action = '*******'
  axios
    .post(action, formData, {
      headers: {
        ......
      },
    })
    .then((response) => {
      // 处理上传成功后的逻辑
      console.log(response)
    })
    .catch((error) => {
      // 处理上传失败后的逻辑
      console.log(error)
    });
};

参考文章：http://blog.ncmem.com/wordpress/2023/11/08/vue上传文件夹目录/