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%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9%e7%9b%ae%e5%bd%95/

欢迎入群一起讨论