基于vue的文件分片上传 demo
inleft
2022-03-19 9cf9fe104510022cc30deb5c194602d17881e77f
更新上传分片策略,处理分片并发时漏传问题
1 files modified
1 files added
154 ■■■■ changed files
.gitignore 64 ●●●●● patch | view | raw | blame | history
src/components/globalUploader.vue 90 ●●●●● patch | view | raw | blame | history
.gitignore
New file
@@ -0,0 +1,64 @@
/node_modules/*
/node_modules
/dist/*
/dist
/public/*.mp3
/*.iml
/*/*.iml
/*/*/*.iml
/.idea/
/doc/db/jeecgcloud_mysql5.7.sql
/nf-common/nf-common-cloud/nf-common-cloud.iml
/nf-auth/nf-auth-shiro/src/main/resources/rebel.xml
/nf-cloud-gateway/src/main/resources/rebel.xml
/nf-cloud-monitor/src/main/resources/rebel.xml
/nf-cloud-system/nf-cloud-system-api/src/main/java/rebel.xml
/nf-cloud-system/nf-cloud-system-biz/src/main/resources/rebel.xml
/nf-common/nf-common-cloud/src/main/java/rebel.xml
/nf-common/nf-common-core/src/main/resources/rebel.xml
/nf-common/nf-constant/src/main/resources/rebel.xml
/nf-common/nf-model/src/main/resources/rebel.xml
/nf-cloud-system/nf-cloud-system-biz/target/
/*/*/target/
/*/target/
*/target
*.iml
/.idea
*.class
target/
.project
.settings/
.classpath
.factorypath
*.json
######################
# Logs
######################
*.log
logs/
*/logs
logs/*
*/logs
.log
*.log.[0-9].gz
######################
# tomcat
################################
test/java/*
*/test/java/*
test/resources/*
*/test/resources/*
/nf-common/nf-model/nf-cloud-system/
/nf-common/nf-model/nf-common/
/mdms-bg-java/nf-common/nf-model/src/main/java/org/jeecg/CodeGenerator.java
/nf-auth/nf-auth-shiro/src/main/java/rebel.xml
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.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.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.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();