js实现上传文件夹功能

发布时间 2023-12-06 17:34:57作者: Xproer-松鼠

最近在研究上传文件夹功能,并上传到阿里云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%e5%ae%9e%e7%8e%b0%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9%e5%8a%9f%e8%83%bd/

欢迎入群一起讨论