美文网首页
js实现上传文件夹功能

js实现上传文件夹功能

作者: 哈里斯s | 来源:发表于2021-02-12 21:37 被阅读0次

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

    }

    相关文章

      网友评论

          本文标题:js实现上传文件夹功能

          本文链接:https://www.haomeiwen.com/subject/wtejxltx.html