最近在研究上传文件夹功能,并上传到阿里云oss,研究了几天终于实现了。
前端代码:添加 “webkitdirectory” 标签表示支持 文件夹上传
<input type='file' id="inputUploadDir" name="file" webkitdirectory >
js代码部分
$("#inputUploadDir").change(function (e) {
let files =this.files
let filesArr = []
//遍历全部文件
for(let j =0,len=files.length; j < len; j++) {
//上传单个文件
if(files[j].name !=".DS_Store") {//过滤mac下面的 .DS_Store文件
let ossFileUrl = genFileUrl(files[j].name) // oss的完整文件路径
uploadDirFile(ossFileUrl, files[j]) //上传到oss
}
//todo 上传到后端,后端通过解析 file.webkitRelativePath 熟悉,生成文件夹路径
})
uploadDirFile(ossUrl, fileName){
let client = new OSS({
region: "", accessKeyId: "", accessKeySecret: "", bucket: ""
})
client.multipartUpload(ossUrl, fileName).then(function (result) {
console.log('success upload '+ result.name)
}).catch(function (err) {
console.log("err", err);
});
}
genFileUrl( fileName){
return ""; //oss存储目录规则
}