大文件上传

src/components/common/bigfileUpload.vue

@@ -5,20 +5,16 @@
     </div>
     <div id="thelist" class="uploader-list">
       <ul>
-        <li v-for="(item, index) in fileList">
-          <a @click="removeFile(item, index)"><span title="点击移除">{{item.name}}</span></a>
-          <el-progress
-                v-if="item.percentage!=0"
-                :text-inside="true"
-                :stroke-width="14"
-                :percentage="item.percentage"
-                status="success"
-              ></el-progress>
+        <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>
+          <el-progress :text-inside="true" :stroke-width="14" :percentage="item.percentage"
+            status="success"></el-progress>
         </li>
       </ul>
     </div>
-    <el-button type="primary" @click="import_data_collect()">开始同步</el-button>
-    <!-- <div class="button-discuss" @click="import_data_collect">开始同步</div> -->
+    <el-button type="primary" @click="upload()">开始上传</el-button>
   </div>
 </template>
 <script>
@@ -50,6 +46,7 @@ export default {
       {
         //时间点1:所有分块进行上存之前触发该方法,即当每个文件开始上传第一个分块前就调用该方法
         beforeSendFile: function (file) {
+          _self.fileList.filter(e => e.id == file.id)[0].state = 1;
           //定义一个异步对象
           var deferred = WebUploader.Deferred();
           uploader
@@ -63,7 +60,7 @@ export default {
               // 判断文件是否上传过，是否存在分片，断点续传
               $.ajax({
                 type: "POST",
-                url: "api/rest/upload/check",
+                url: "api/rest/file/bigFile/check",
                 async: false,
                 data: {
                   fileMd5: val,
@@ -80,7 +77,7 @@ export default {
                     file.indexcode = resultCode;
                   }
                 },
-                error: function () {},
+                error: function () { },
               });
               //获取文件信息后进入下一步
               deferred.resolve();
@@ -110,24 +107,36 @@ 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;
+          } else { //如果所有分块上传成功，则通知后台合并分块
             $.ajax({
               type: "POST",
-            url: "api/rest/upload/merge",
+              url: "api/rest/file/bigFile/merge",
               data: {
                 fileName: file.name,
                 fileMd5: file.md5,
                 fileType: _self.fileType
               },
               success: function (data) {
-                if(data.code == 9000){
-                  _self.$message.success("成功数据"+data.data + "条数据");
-                }else{
-                  _self.$message.warning(data.message);
-                }
+                _self.fileList.filter(e => e.id == file.id)[0].state = 2;
+                param.success = data.code == 9000;
+                _self.$emit("Completed", param);
               },
-            error: function () {},
+              error: function () { },
             });
+          }
         },
       }
     );
@@ -142,7 +151,7 @@ export default {
       chunked: true,
       chunkSize: 10 * 1024 * 1024, // 10M 每个分片的大小限制
       threads: 3,
-        server: 'api/rest/upload/part',
+      server: 'api/rest/file/bigFile/part',
       // auto: true,
       // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
       disableGlobalDnd: true,
@@ -152,8 +161,7 @@ export default {
     });
     // 当有文件被添加进队列的时候触发
     uploader.on("fileQueued", function (file) {
-      console.log("添加", file);
-      _self.fileList.push({name: file.name, id: file.id, percentage: 0});
+      _self.fileList.push({ name: file.name, id: file.id, percentage: 0, state: 0 });
     });
     /**
      * 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
@@ -173,11 +181,11 @@ export default {
     /**
      * 文件上传成功后，就在该文件对应的位置上，显示上传成功，file.id,作为上传文件位置标签的id,
      */
-    uploader.on("uploadSuccess", (file) => {});
+    uploader.on("uploadSuccess", (file) => { });
     /**
      * 发生错误时
      */
-    uploader.on("uploadError", function (file) {});
+    uploader.on("uploadError", function (file) { });
     /**
      * 不管所有分片发送成功或者失败都会执行该方法
      */
@@ -188,53 +196,56 @@ export default {
     this.uploader = uploader;
   },
   methods: {
-    import_data_collect() {
+    upload() {
       this.uploader.upload();
     },
     removeFile(item, index) {
+      if (item.state == 1) {//上传中的文件无法删除
+        return;
+      }
       this.uploader.removeFile(item.id);
       this.fileList.splice(index, 1);
     },
     getProgressBar(file, percentage) {
-      let item = this.fileList.find(e=>e.id == file.id);
+      let item = this.fileList.find(e => e.id == file.id);
       item && (item.percentage = Math.floor(percentage * 100 * 100) / 100);
     }
   },
 };
 </script>
 <style lang="scss" scope>
-  .uploadWrapper {
-    height: 100%;
-  }
+.uploadWrapper {
+  height: 524px;
+}
 
-  #picker > div:nth-child(2){
+#picker>div:nth-child(2) {
   width: 126px !important;
   height: 40px !important;
-  }
+}
 
-  .btnUpload{
+.btnUpload {
   height: 50px;
-  }
+}
 
-  #thelist{
+#thelist {
   height: auto;
   overflow-y: auto;
   max-height: calc(100% - 40px);
-  }
+}
 
-  #thelist a{
+#thelist a {
   text-decoration: underline;
   cursor: pointer;
   font-size: 18px;
-  }
+}
 
-  #thelist li {
+#thelist li {
   /* 去掉li前面的小圆点 */
   list-style: none;
   margin: 10px 0px;
-  }
+}
 
-  .button-discuss {
+.button-discuss {
   width: 100px;
   height: 30px;
   line-height: 30px;
@@ -247,5 +258,5 @@ export default {
   background-image: url(../../assets/img/yqjc/40.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  }
+}
 </style>

src/view/sjgl/wxk_public.vue

@@ -24,6 +24,7 @@
                         circle></el-button>
                 </el-tooltip> -->
                 <div class="button-discuss1" @click="handleAdd()">新增</div>
+                <div class="button-discuss1" @click="bigFileUploadAdd()">大文件新增</div>
             </div>
             <div class="bottom-div">
                 <transition name="el-zoom-in-top" v-on:after-leave="afterLeave_lb">
@@ -262,6 +263,11 @@
                 <el-button type="primary" @click="submit_bj">确 定</el-button>
             </span>
         </el-dialog>
+
+        <el-dialog title="大文件上传" :visible.sync="centerDialogVisible_bigFile" width="30%" center class="xzwd">
+            <BigfileUpload @Completed="completeUploadBigFile"></BigfileUpload>
+        </el-dialog>
+
         <el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
             <div style="height: 400px; position: relative">
                 <video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
@@ -289,10 +295,12 @@ import {
     arr_sound_format, //音频的文件格式
 } from "../../util/http_util";
 import { uuid } from "../../util/data_util";
+import BigfileUpload from "../../components/common/bigfileUpload.vue";
 export default {
     data() {
         return {
             centerDialogVisible_add: false,
+            centerDialogVisible_bigFile: false,
             centerDialogVisible_edit: false,
             centerDialogVisible_video: false,
             centerDialogVisible_sound: false,
@@ -356,6 +364,9 @@ export default {
             }
         };
     },
+    components: {
+        BigfileUpload
+    },
     props: {
         clientDetails: {
             type: Object,
@@ -626,6 +637,51 @@ export default {
             }, 200)
         },
 
+        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",
+                    message: "请选择文档列表子节点",
+                });
+                return;
+            }
+            let _this = this;
+            _this.centerDialogVisible_bigFile = true;
+        },
+
+        completeUploadBigFile(evt) {
+            if (!evt.success) {
+                this.$message({
+                    type: "warning",
+                    message: "上传失败!",
+                });
+            }
+            let fd = new FormData();
+            let fileInfo = {
+                createId: this.$store.getters.userInfo.account,
+                description: null,
+                file: evt.file,
+                treeId: this.clientDetails_type[0],
+                name: evt.file.name,
+                keyword: null,
+                module: this.module_name
+            };
+            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);
+                })
+        },
+
         //编辑弹出框确定
         submit_bj() {
             let _this = this;
@@ -1328,4 +1384,5 @@ export default {
             padding: 25px 25px 0px;
         }
     }
-}</style>
+}
+</style>