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