大文件上传

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,50 +107,61 @@ export default {
         //时间点3:一个文件的所有分片上传成功后，调用该方法,让后台合并所有分片
         //该方法的在uploader.on("success")方法前执行。
         afterSendFile: function (file) {
-          //如果所有分块上传成功，则通知后台合并分块
-          $.ajax({
-            type: "POST",
-            url: "api/rest/upload/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);
-                }
-            },
-            error: function () {},
-          });
+          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/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;
+                param.success = data.code == 9000;
+                _self.$emit("Completed", param);
+              },
+              error: function () { },
+            });
+          }
         },
       }
     );
     //创建实例
     var uploader = WebUploader.create({
-        pick: {
-            id: '#picker',
-            label: '点击选择文件'
-        },
-        duplicate: true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
-        swf: 'WebUploader/uploader.swf',
-        chunked: true,
-        chunkSize: 10 * 1024 * 1024, // 10M 每个分片的大小限制
-        threads: 3,
-        server: 'api/rest/upload/part',
-        // auto: true,
-        // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
-        disableGlobalDnd: true,
-        fileNumLimit: 1024,
-        fileSizeLimit: 50 * 1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
-        fileSingleSizeLimit: 10 * 1024 * 1024 * 1024 //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
+      pick: {
+        id: '#picker',
+        label: '点击选择文件'
+      },
+      duplicate: true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
+      swf: 'WebUploader/uploader.swf',
+      chunked: true,
+      chunkSize: 10 * 1024 * 1024, // 10M 每个分片的大小限制
+      threads: 3,
+      server: 'api/rest/file/bigFile/part',
+      // auto: true,
+      // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
+      disableGlobalDnd: true,
+      fileNumLimit: 1024,
+      fileSizeLimit: 50 * 1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
+      fileSingleSizeLimit: 10 * 1024 * 1024 * 1024 //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
     });
     // 当有文件被添加进队列的时候触发
     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,79 +181,82 @@ export default {
     /**
      * 文件上传成功后，就在该文件对应的位置上，显示上传成功，file.id,作为上传文件位置标签的id,
      */
-    uploader.on("uploadSuccess", (file) => {});
+    uploader.on("uploadSuccess", (file) => { });
     /**
      * 发生错误时
      */
-    uploader.on("uploadError", function (file) {});
+    uploader.on("uploadError", function (file) { });
     /**
      * 不管所有分片发送成功或者失败都会执行该方法
      */
     uploader.on("uploadComplete", function (file) {
-  
+
     });
     //设置全局变量
     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%;
-  }
-  
-  #picker > div:nth-child(2){
-    width: 126px !important;
-    height: 40px !important;
-  }
+.uploadWrapper {
+  height: 524px;
+}
+
+#picker>div:nth-child(2) {
+  width: 126px !important;
+  height: 40px !important;
+}
 
-  .btnUpload{
-    height: 50px;
-  }
+.btnUpload {
+  height: 50px;
+}
 
-  #thelist{
-    height: auto;
-    overflow-y: auto;
-    max-height: calc(100% - 40px);
-  }
+#thelist {
+  height: auto;
+  overflow-y: auto;
+  max-height: calc(100% - 40px);
+}
 
-  #thelist a{
-    text-decoration: underline;
-    cursor: pointer;
-    font-size: 18px;
-  }
+#thelist a {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 18px;
+}
 
-  #thelist li {
-    /* 去掉li前面的小圆点 */
-    list-style: none;
-    margin: 10px 0px;
-  }
+#thelist li {
+  /* 去掉li前面的小圆点 */
+  list-style: none;
+  margin: 10px 0px;
+}
 
-  .button-discuss {
-    width: 100px;
-    height: 30px;
-    line-height: 30px;
-    float: left;
-    font-size: 14px;
-    margin-top: 5px;
-    margin-left: 20px;
-    text-align: center;
-    cursor: pointer;
-    background-image: url(../../assets/img/yqjc/40.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
+.button-discuss {
+  width: 100px;
+  height: 30px;
+  line-height: 30px;
+  float: left;
+  font-size: 14px;
+  margin-top: 5px;
+  margin-left: 20px;
+  text-align: center;
+  cursor: pointer;
+  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>