vue上传文件夹目录

卯足劲往前冲

已于 2023-09-21 11:26:28 修改

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript

于 2023-08-22 15:43:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47190975/article/details/132429187

版权

在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)
    });
};