基于vue的文件分片上传 demo
inleft
2022-03-19 9cf9fe104510022cc30deb5c194602d17881e77f
src/components/globalUploader.vue
@@ -61,6 +61,13 @@
   export default {
      data() {
         return {
            store: {
            },
            retrySet: {
            },
            paramSet: {},
            options: {
               //target: "http://192.168.40.222:8089/aa",
               chunkSize: 6 * 1024 * 1024,
@@ -77,7 +84,8 @@
                  }
                  //已经秒传
                  if (resp.result.chunkIndex != null && resp.result.chunkIndex[chunk.offset + 1] > 0) {
                  let indexArray=resp.result.chunkIndex;
                  if (resp.result.chunkIndex != null && indexArray[chunk.offset] > 0) {
                     console.log(chunk.offset + 1 + "已经秒传..")
                     return true;
                  }
@@ -123,14 +131,14 @@
         },
         onFileComplete(rootFile) {
            console.log(11111)
            console.log(rootFile)
            // console.log(11111)
            // console.log(rootFile)
         },
         onFileProgress(rootFile, file, chunk) {
            
            console.log("onFileProgress")
            console.log(rootFile)
            console.log(chunk)
            // console.log("onFileProgress")
            // console.log(rootFile)
            // console.log(chunk)
            console.log(`上传中 ${file.name},chunk:${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
         },
         onFileSuccess(rootFile, file, response, chunk) {
@@ -152,6 +160,7 @@
            // 文件状态设为“合并中”
            $this.statusRemove(file.id);
            $this.statusSet(file.id, 'merging');
            //请求合并
@@ -210,7 +219,7 @@
            // 文件状态设为"计算MD5"
            this.statusSet(file.id, 'md5');
            file.pause();
            // file.pause();
            loadNext();
@@ -269,26 +278,37 @@
                     // 将自定义参数直接加载uploader实例的opts上
                     let opts = $this.uploader.opts;
                     // opts.target = "http://localhost:8001/commonFileUpload/doUpload"; //上传接口
                     opts.target = function(file, chunk, isTest, obj) {
                        if(isTest){
                           return "http://localhost:8001/commonFileUpload/doUpload?mainMD5="+file.uniqueIdentifier; //上传接口
                        }
                        return  uploadOptions.uploadUrlList[chunk.offset];
                     opts.target = "http://localhost:8001/commonFileUpload/doUpload"; //上传接口
                     // opts.target = function(file, chunk, isTest, obj) {
                     //    if (isTest) {
                     //       return "http://localhost:8001/commonFileUpload/doUpload?mainMD5=" + file
                     //          .uniqueIdentifier; //上传接口
                     //    }
                     //    return uploadOptions.uploadUrlList[chunk.offset];
                        
                     }
                     opts.processResponse =function(response, cb,file, chunk) {
                        $this.$axios.get('http://localhost:8001/commonFileUpload/updateProgress?mainMD5='+
                        file.uniqueIdentifier +"&chunk="+ (chunk.offset+1)+"&chunkSize="+ chunk.loaded)
                           .then(function(response) {
                               cb(null, response.data);
                           })
                           .catch(function(error) {
                               cb(null, error);
                           });
                     }
                     // }
                     
                     opts.processParams=function (params) {return {}}
                     // opts.processResponse = function(response, cb, file, chunk) {
                     //    $this.$axios.get(
                     //          'http://localhost:8001/commonFileUpload/updateProgress?mainMD5=' +
                     //          file.uniqueIdentifier + "&chunk=" + (chunk.offset + 1) + "&chunkSize=" +
                     //          chunk.loaded)
                     //       .then(function(response) {
                     //          cb(null, response.data);
                     //       })
                     //       .catch(function(error) {
                     //          cb(null, error);
                     //       });
                     // }
                     opts.processParams = function(params,file,chunk,isTest) {
                        let temp= $this.paramSet[file.uniqueIdentifier];
                        // chunkMD5:opts.chunkNumber,
                        // chunkNumber:opts.chunkNumber
                        temp.chunkMD5=chunk.offset+1;
                        temp.chunkNumber=chunk.offset+1;
                        return temp;
                     }
                     //    console.log("ddd")
                     //    if (chunk.offset == 0) {
@@ -304,17 +324,27 @@
                     // }
                     // opts.chunkSize = uploadOptions.chunkSize; //切片大小
                     opts.method= "octet";
                     // opts.method = "octet";
                     opts.method = "multipart";
                     opts.testMethod = "GET";
                     opts.uploadMethod = "PUT";
                     opts.uploadMethod = "POST";
                     $this.params.mainMD5 = md5; //mainMD5参数
                     $this.params.chunkNumber = opts.chunkNumber; //分片索引参数
                     //$this.params.chunkNumber = opts.chunkNumber; //分片索引参数
                     Object.assign(opts, {
                        query: {
                           ...$this.params,
                        }
                     })
                     //文件重新分块
                     file.uploader.opts.chunkSize = uploadOptions.chunkSize;
                     file.bootstrap();
                     $this.paramSet[md5] = {
                        mainMD5: md5,
                        chunkSize: uploadOptions.chunkSize,
                        // chunkMD5:opts.chunkNumber,
                        // chunkNumber:opts.chunkNumber
                     }
                     file.uniqueIdentifier = md5;
                     file.resume();