Merge branch 'master' of http://192.168.168.218/xiaminwei/xxx_phase2_web

src/components/common/bigfileUpload.vue

@@ -7,8 +7,9 @@
       <ul>
         <li v-for="(item, index) in  fileList ">
           <a @click="removeFile(item, index)"><span title="点击移除">{{ item.name }}</span></a>
-          <span style="color: white;"
-            :class="[item.state == 1 ? 'el-icon-loading' : item.state == 2 ? 'el-icon-check' : '']"></span>
+          <span
+            :class="[item.state == 1 ? 'el-icon-loading' : item.state == 2 ? 'el-icon-success' : item.state == 3 ? 'el-icon-warning' : '']">{{
+              item.stateText }}</span>
           <el-progress :text-inside="true" :stroke-width="14" :percentage="item.percentage"
             status="success"></el-progress>
         </li>
@@ -21,14 +22,24 @@
 import $ from "jquery";
 import WebUploader from "webuploader";
 import "webuploader/dist/webuploader.css";
+import { ACCESS_TOKEN, ACCESS_USER, HTTP_STATUS } from "../../constant/user";
 export default {
-  props: ['fileType'],
+  props: {
+    addFileInfo: {
+      type: Function
+    },
+    checkFileExist: {
+      type: Function
+    }
+  },
   data() {
     return {
       fileList: [],
+      headers: { 'x-requested-with': 'XMLHttpRequest' }
     };
   },
   mounted() {
+    this.headers[ACCESS_TOKEN] = sessionStorage.getItem("token");
     var _self = this;
     //必须先注销原来的，否则服务会执行多次
     WebUploader.Uploader.unRegister("uploadBigFile");
@@ -46,7 +57,6 @@ export default {
       {
         //时间点1:所有分块进行上存之前触发该方法,即当每个文件开始上传第一个分块前就调用该方法
         beforeSendFile: function (file) {
-          _self.fileList.filter(e => e.id == file.id)[0].state = 1;
           //定义一个异步对象
           var deferred = WebUploader.Deferred();
           uploader
@@ -57,30 +67,33 @@ export default {
             .then((val) => {
               file.md5 = val;
               file.uid = WebUploader.Base.guid();
-              // 判断文件是否上传过，是否存在分片，断点续传
-              $.ajax({
-                type: "POST",
-                url: "api/rest/file/bigFile/check",
-                async: false,
-                data: {
-                  fileMd5: val,
-                },
-                success: function (data) {
-                  var resultCode = data.data;
+              Promise.resolve()
+                .then(res => {
+                  if (_self.checkFileExist) {
+                    return _self.checkFileExist(val);
+                  } else {
+                    return Promise.resolve(false);
+                  }
+                }).then(res => {
+                  if (res) {
+                    return Promise.reject({ message: "文件已存在" });
+                  } else {
+                    return _self.post(`api/rest/file/bigFile/check?fileMd5=${val}`);
+                  }
+                }).then(res => {
                   //  文件已经上传过,忽略上传过程，直接标识上传成功；
-                  if (resultCode === -1) {
+                  if (res) {
                     uploader.skipFile(file);
                     file.pass = true;
                     _self.getProgressBar(file, 1);
                   } else {
                     //文件没有上传过，下标为0 文件上传中断过，返回当前已经上传到的下标
-                    file.indexcode = resultCode;
+                    file.indexcode = 0;
                   }
-                },
-                error: function () { },
-              });
-              //获取文件信息后进入下一步
-              deferred.resolve();
+                  deferred.resolve();
+                }).catch(err => {
+                  deferred.reject(err.message);//触发error事件
+                });
             });
           return deferred.promise();
         },
@@ -107,38 +120,35 @@ export default {
         //时间点3:一个文件的所有分片上传成功后，调用该方法,让后台合并所有分片
         //该方法的在uploader.on("success")方法前执行。
         afterSendFile: function (file) {
-          let param = {
-            success: file.pass,
-            md5: file.md5,
-            file: {
-              name: file.name,
-              size: file.size,
-              type: file.ext,
-              uuid: file.uid + "." + file.ext,
-            }
-          };
-          if (file.pass) {//文件已经存在
-            _self.$emit("Completed", param);
-            _self.fileList.filter(e => e.id == file.id)[0].state = 2;
-            _self.fileList.filter(e => e.id == file.id)[0].percentage = 100;
-          } else { //如果所有分块上传成功，则通知后台合并分块
-            $.ajax({
-              type: "POST",
-              url: "api/rest/file/bigFile/merge",
-              data: {
-                fileName: file.name,
-                fileMd5: file.md5,
-                fileType: _self.fileType
-              },
-              success: function (data) {
-                _self.fileList.filter(e => e.id == file.id)[0].state = 2;
-                _self.fileList.filter(e => e.id == file.id)[0].percentage = 100;
-                param.success = data.code == 9000;
-                _self.$emit("Completed", param);
-              },
-              error: function () { },
+          var deferred = WebUploader.Deferred();
+          Promise.resolve(file.pass)
+            .then(res => {
+              if (res) {
+                return Promise.resolve();
+              } else {
+                return _self.post(`api/rest/file/bigFile/merge?fileName=${encodeURIComponent(file.name)}&fileMd5=${file.md5}`);
+              }
+            })
+            .then(res => {
+              if (_self.addFileInfo) {
+                return _self.addFileInfo({
+                  md5: file.md5,
+                  file: {
+                    name: file.name,
+                    size: file.size,
+                    type: file.ext,
+                    uuid: file.uid + "." + file.ext,
+                  }
+                });
+              } else {
+                return Promise.resolve(res);
+              }
+            }).then(res => {
+              deferred.resolve();
+            }).catch(err => {
+              deferred.reject(err.message);
             });
-          }
+          return deferred.promise();
         },
       }
     );
@@ -165,19 +175,26 @@ export default {
       fileSizeLimit: 50 * 1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
       fileSingleSizeLimit: 10 * 1024 * 1024 * 1024 //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
     });
-    // 当有文件被添加进队列的时候触发
-    uploader.on("fileQueued", function (file) {
-      _self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 });
-    });
     /**
      * 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
      */
-    uploader.onUploadBeforeSend = function (obj, data) {
-      //console.log("onUploadBeforeSend");
+    uploader.onUploadBeforeSend = function (obj, data, headers) {
+      //增加请求参数
       var file = obj.file;
       data.md5 = file.md5 || "";
       data.uid = file.uid;
+      //增加请求token
+      $.extend(headers, _self.headers);
     };
+    // 当有文件被添加进队列的时候触发
+    uploader.on("fileQueued", function (file) {
+      _self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 });
+    });
+    //单个文件开始上传
+    uploader.on("uploadStart", (file) => {
+      _self.fileList.filter(e => e.id == file.id)[0].state = 1;
+      console.log("uploadStart");
+    });
     /**
      * 上传过程中，一直会执行该方法
      */
@@ -187,16 +204,29 @@ export default {
     /**
      * 文件上传成功后，就在该文件对应的位置上，显示上传成功，file.id,作为上传文件位置标签的id,
      */
-    uploader.on("uploadSuccess", (file) => { });
+    uploader.on("uploadSuccess", (file, response) => {
+      _self.fileList.filter(e => e.id == file.id)[0].state = 2;
+      _self.fileList.filter(e => e.id == file.id)[0].percentage = 100;
+      console.log("uploadSuccess");
+    });
     /**
      * 发生错误时
      */
-    uploader.on("uploadError", function (file) { });
+    uploader.on("uploadError", function (file, reason) {
+      _self.fileList.filter(e => e.id == file.id)[0].state = 3;
+      _self.fileList.filter(e => e.id == file.id)[0].stateText = reason;
+      console.log("uploadError");
+    });
     /**
      * 不管所有分片发送成功或者失败都会执行该方法
      */
     uploader.on("uploadComplete", function (file) {
-
+      console.log("uploadComplete");
+    });
+    //所有文件上传结束
+    uploader.on("uploadFinished", () => {
+      _self.$emit("Finished", {});
+      console.log("uploadFinished");
     });
     //设置全局变量
     this.uploader = uploader;
@@ -216,6 +246,29 @@ export default {
       let item = this.fileList.find(e => e.id == file.id);
       //在分片合并之后在设置进度百分之百
       item && (item.percentage = percentage == 1 ? 99.9 : Math.floor(percentage * 100 * 100) / 100);
+    },
+    post(url) {
+      return new Promise((resolve, reject) => {
+        fetch(url, {
+          method: "POST",
+          headers: new Headers(this.headers)
+        }).then(res => {
+          if (res.status == 200) {
+            return res.text();
+          } else {
+            console.log(res.statusText);
+            reject(HTTP_STATUS);
+          }
+        }).then(res => {
+          let result = JSON.parse(res);
+          if (result.code == 9000) {
+            resolve(result.data);
+          } else {
+            console.log(result);
+            reject(result);
+          }
+        }).catch(err => reject(err));
+      })
     }
   },
 };
@@ -243,7 +296,7 @@ export default {
 #thelist a {
   // text-decoration: underline;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 16px;
   color: white;
 }
 
@@ -252,18 +305,32 @@ export default {
   list-style: none;
   margin: 10px 0px;
 
-  .el-progress{
+  .el-progress {
     width: 95%;
     margin-top: 3px;
-    .el-progress-bar{
-      .el-progress-bar__outer{
+
+    .el-progress-bar {
+      .el-progress-bar__outer {
         height: 12px !important;
       }
     }
   }
 }
 
-.startUpload{
+.startUpload {
   margin-top: 5px;
 }
+
+.el-icon-loading {
+  color: white;
+}
+
+.el-icon-warning {
+  color: red;
+  font-size: 11px;
+}
+
+.el-icon-success {
+  color: green
+}
 </style>

src/view/sjgl/wxk_public.vue

@@ -265,7 +265,8 @@
         </el-dialog>
 
         <el-dialog title="大文件上传" :visible.sync="centerDialogVisible_bigFile" width="30%" center class="xzwd">
-            <BigfileUpload @Completed="completeUploadBigFile"></BigfileUpload>
+            <BigfileUpload :checkFileExist="checkFileExist" :addFileInfo="addFileInfo" @Finished="bigFileUploadFinished">
+            </BigfileUpload>
         </el-dialog>
 
         <el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
@@ -636,7 +637,7 @@ export default {
             }, 200)
         },
 
-        bigFileUploadAdd() {
+        bigFileUploadAdd() {//弹出
             if (this.clientDetails_type[0] == 1 || this.clientDetails_type[0] == 2 || this.clientDetails_type[0] == 3 || this.clientDetails_type[0] == 4) {
                 this.$message({
                     type: "warning",
@@ -648,13 +649,11 @@ export default {
             _this.centerDialogVisible_bigFile = true;
         },
 
-        completeUploadBigFile(evt) {
-            if (!evt.success) {
-                this.$message({
-                    type: "warning",
-                    message: "上传失败!",
-                });
-            }
+        bigFileUploadFinished(evt) {//所有文件上传完成，不一定都成功
+            this.handleCurrentChange_lb(1);
+        },
+
+        addFileInfo(evt) {//文件信息的上传，在文件上传后执行
             let fd = new FormData();
             let fileInfo = {
                 createId: this.$store.getters.userInfo.account,
@@ -668,17 +667,11 @@ export default {
             fd.append("info", JSON.stringify(fileInfo));
             fd.append("destFilename", evt.file.uuid);
             fd.append("md5", evt.md5);
-            fileUpload_PUT("api/rest/3z/document/upload", fd).then((data) => {
-                this.$message({
-                    type: "success",
-                    message: "文件上传成功!",
-                });
-                this.centerDialogVisible_add = false;
-                this.handleCurrentChange_lb(1);
-            })
-                .catch((err) => {
-                    this.$message.warning(err.message);
-                })
+            return fileUpload_PUT("api/rest/3z/document/upload", fd);
+        },
+
+        checkFileExist(md5) {
+            return get(`api/rest/3z/document/checkFileInfoExist?md5=${md5}&bucket=Document`);
         },
 
         //编辑弹出框确定