js实现上传文件夹功能

2021-02-12  本文已影响0人  哈里斯s

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

}

上一篇 下一篇

猜你喜欢

热点阅读