add status and progress

web_src/js/App.vue

@@ -4,9 +4,7 @@
           :options="options" 
           :autoStart="false" 
           @file-added="onFileAdded"
-          @file-success="onFileSuccess"
-          @file-progress="onFileProgress"
-          @file-error="onFileError"
+          fileStatusText="fileStatusText"
           class="uploader-app">
     <uploader-unsupport></uploader-unsupport>
     <uploader-drop>
@@ -14,6 +12,8 @@
       <uploader-btn>选择文件</uploader-btn>
     </uploader-drop>
     <uploader-list></uploader-list>
+    <p>文件处理状态：{{status}}</p>
+    <p>文件上传进度：{{progress}}%</p>
   </uploader>
 </template>
 
@@ -31,10 +31,7 @@
         attrs: {
           accept: '*'
         },
-        props: ["datasetId"],
-        panelShow: false,   //选择文件后，展示上传panel
-        collapse: false,
-        statusTextMap: {
+        fileStatusText: {
             success: '上传成功',
             error: '上传出错了',
             uploading: '上传中...',
@@ -43,16 +40,25 @@
             cmd5: '计算md5...'
         },
         fileStatusText: (status, response) => {
-            return this.statusTextMap[status];
+            return this.fileStatusText[status];
         },
+        progress: 0,
+        status: '初始状态',
       }
     },
     created() {
         //const uploaderInstance = this.$refs.uploader;
     },
+    mounted () {
+      this.$nextTick(() => {
+        window.uploader = this.$refs.uploader.uploader
+      })
+    },
     methods: {
         onFileAdded(file) {
           file.datasetId = document.getElementById("datasetId").getAttribute("datasetId");
+          this.progress=0;
+          this.status='初始状态';
           // 计算MD5
           this.computeMD5(file);
         },
@@ -207,7 +213,20 @@
               })
           }
 
-          function upload() {
+          var successChunks = new Array();
+          var successParts = new Array();
+          successParts = file.chunks.split(",");
+          for (let i = 0; i < successParts.length; i++) {
+            successChunks[i] = successParts[i].split("-")[0].split("\"")[1];
+          }
+          
+          var urls = new Array();
+          var etags = new Array();
+
+          console.log('上传分片...');
+          this.status='上传中';
+          
+          {
             loadNext();
             fileReader.onload = async (e) => {
               await uploadChunk(e);
@@ -215,44 +234,18 @@
         
               if (currentChunk < chunks) {
                   console.log(`第${currentChunk}个分片上传完成, 开始第${currentChunk +1}/${chunks}个分片上传`);
+                  this.progress = Math.ceil(currentChunk / chunks)*100;
                   await loadNext();
               } else {
-                  //console.log({{.dataset_id}});
                   await completeUpload();
                   console.log(`文件上传完成：${file.name} \n分片：${chunks} 大小:${file.size} 用时：${(new Date().getTime() - time)/1000} s`);
-                  //window.location.reload();
+                  this.progress = 100;
+                  this.status='上传完成';
+                  window.location.reload();
               }
             };
           }
 
-          var successChunks = new Array();
-          var successParts = new Array();
-          successParts = file.chunks.split(",");
-          for (let i = 0; i < successParts.length; i++) {
-            successChunks[i] = successParts[i].split("-")[0].split("\"")[1];
-          }
-          
-          var urls = new Array();
-          var etags = new Array();
-
-          console.log('上传分片...');
-          
-          upload();
-
-        },
-        chkMd5(file) {
-            let time = new Date().getTime();
-            let fileReader = new FileReader();
-            let spark = new SparkMD5(); //创建md5对象（基于SparkMD5）
-            fileReader.readAsBinaryString(file.file);
-            console.log('开始计算MD5...')
-            //文件读取完毕之后的处理
-            fileReader.onload = (e) => {
-                spark.appendBinary(e.target.result);
-                let md5 = spark.end(); 
-                console.log(`MD5计算完成：${file.name} \nMD5：${md5} \n用时：${new Date().getTime() - time} ms`);
-                spark.destroy();
-            };
         },
         //计算MD5
         computeMD5(file) {
@@ -266,7 +259,7 @@
             let time = new Date().getTime();
 
             console.log('计算MD5...')
-            file.cmd5 = true;
+            this.status='计算MD5';
             file.totalChunkCounts = chunks;
             loadNext();
 
@@ -276,9 +269,6 @@
          
                 if (currentChunk < chunks) {
                     console.log(`第${currentChunk}分片解析完成, 开始第${currentChunk +1}/${chunks}分片解析`);
-                    // let percent = Math.floor(currentChunk / chunks * 100);
-                    // console.log(percent);
-                    // file.cmd5progress = percent;
                     loadNext();
                 } else {
                     let md5 = spark.end();
@@ -312,6 +302,7 @@
                 file.chunks = "";
                 this.multipartUpload(file);
               } else {
+                //失败如何处理
                 return;
               }
             } else {
@@ -321,7 +312,9 @@
                   await addAttachment(file);
                 }
                 console.log("文件已上传完成");
-                //window.location.reload();
+                this.progress = 100;
+                this.status='上传完成';
+                window.location.reload();
               } else {
                 //断点续传
                 this.multipartUpload(file);
@@ -344,37 +337,7 @@
                 });
               })
             }
-        },
-        // 文件进度的回调
-        onFileProgress(rootFile, file, chunk) {
-            console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
-        },
-        onFileSuccess(rootFile, file, response, chunk) {
-            let resp = JSON.parse(response);
-            if (resp.code === 0 && resp.merge === false) {
-                console.log('上传成功，不需要合并');
-            } else {
-                axios.post('http://localhost:9999/up.php?action=merge', {
-                    filename: file.name,
-                    identifier: file.uniqueIdentifier,
-                    totalSize: file.size,
-                    totalChunks: chunk.offset + 1
-                }).then(function(res){
-                    if (res.code === 0) {
-                        console.log('上传成功')
-                    } else {
-                        console.log(res.message);
-                    }
-                })
-                .catch(function(error){
-                    console.log(error);
-                });
-            }
-        },
-
-        onFileError(rootFile, file, response, chunk) {
-            console.log('Error:', response)
-        },
+        }
     }
   }
 </script>