js实现上传文件夹功能

最近在研究上传文件夹功能，并上传到阿里云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存储目录规则
}

参考文章：http://blog.ncmem.com/wordpress/2023/12/06/js实现上传文件夹功能/