From 07223ea2fe23a5157fb1676604d9b49ecb3b414d Mon Sep 17 00:00:00 2001
From: liaoboping <2824044657@qq.com>
Date: Thu, 15 Aug 2024 11:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FragmentUpload/index.vue   | 140 ++++++++++++++++--
 ruoyi-ui/src/main.js                          |   3 +
 ruoyi-ui/src/views/official/index/index.vue   |  10 ++
 3 files changed, 139 insertions(+), 14 deletions(-)

diff --git a/ruoyi-ui/src/components/FragmentUpload/index.vue b/ruoyi-ui/src/components/FragmentUpload/index.vue
index ef84f76..be5edac 100644
--- a/ruoyi-ui/src/components/FragmentUpload/index.vue
+++ b/ruoyi-ui/src/components/FragmentUpload/index.vue
@@ -78,7 +78,7 @@ export default {
         testChunks: true,
         // 服务器分片校验函数，秒传及断点续传基础
         checkChunkUploadedByResponse: function (chunk, message) {
-          let objMessage = JSON.parse(message);
+          let objMessage = JSON.parse(message).data;
           if (objMessage.skipUpload) {
             return true;
           }
@@ -89,7 +89,8 @@ export default {
         },
         // 额外的自定义查询参数
         query() {
-        }
+        },
+        multiple: false,
       },
       attrs: {
         accept: ACCEPT_CONFIG.getAll()
@@ -125,7 +126,7 @@ export default {
     },
     //上传过程中，会不断触发file-progress上传进度的回调
     onFileProgress(rootFile, file, chunk) {
-      console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
+      // console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
     },
     onFileSuccess(rootFile, file, response, chunk) {
 
@@ -139,8 +140,15 @@ export default {
       //   return
       // }
 
-      // 如果服务端返回需要合并
-      if (res.data.needMerge) {
+      // // 如果服务端返回需要合并
+      if (res.data.skipUpload) {
+        // 不需要合并
+        Bus.$emit('fileSuccess');
+        this.panelShow = false
+        Bus.$emit('refreshFileList'); // 触发刷新文件列表事件
+        // res.data.videoUrl
+        this.$emit('input', res.data.videoUrl);
+      } else {
         // 文件状态设为“合并中”
         this.statusSet(file.id, 'merging');
         let param = {
@@ -149,13 +157,6 @@ export default {
           'totalSize': rootFile.size
         }
         this.customMerge(param, file.id);
-
-        // 不需要合并
-      } else {
-        Bus.$emit('fileSuccess');
-        console.log('上传成功');
-        this.panelShow = false
-        Bus.$emit('refreshFileList'); // 触发刷新文件列表事件
       }
     },
     customMerge (param, fileId, count = 3) {
@@ -167,8 +168,10 @@ export default {
           this.statusRemove(fileId);
           this.panelShow = false
           Bus.$emit('refreshFileList'); // 触发刷新文件列表事件
+          // res.data
+          this.$emit('input', res.data);
         }).catch(e => {
-          console.log("合并异常,重新发起请求,文件名为:", file.name)
+          // console.log("合并异常,重新发起请求,文件名为:", file.name)
           //由于网络或服务器原因,导致合并过程中断线,此时如果不重新发起请求,就会进入失败的状态,导致该文件无法重试
           this.customMerge(params, fileId, count - 1)
         });
@@ -214,7 +217,7 @@ export default {
         } else {
           let md5 = spark.end();
           this.computeMD5Success(md5, file);
-          console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);
+          // console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);
         }
       });
 
@@ -324,4 +327,113 @@ export default {
 </script>
 
 <style scoped lang="scss">
+#global-uploader {
+
+  h1, h2 {
+    font-weight: normal;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0px 4px;
+  }
+
+  li {
+    display: inline-block;
+  }
+
+  .uploader-app {
+    width: 660px;
+  }
+
+  .file-panel {
+    background-color: #fff;
+    border: 1px solid #e2e2e2;
+    border-radius: 7px 7px 0 0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+
+    .file-title {
+      display: flex;
+      height: 45px;
+      padding: 0 15px;
+      border-bottom: 1px solid #ddd;
+      font-size: 14px;
+
+      .operate {
+        flex: 1;
+        text-align: right;
+      }
+    }
+
+    .file-list {
+      position: relative;
+      height: 264px;
+      width: 654px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      background-color: #fff;
+
+      > li {
+        background-color: #fff;
+      }
+    }
+
+    &.collapse {
+      .file-title {
+        background-color: #E7ECF2;
+      }
+    }
+  }
+
+  .no-file {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 16px;
+  }
+
+  .uploader-file {
+    width: 654px;
+  }
+
+  ///deep/ .uploader-file-icon {
+  .uploader-file-icon {
+    &:before {
+      content: '' !important;
+    }
+
+    &[icon=image] {
+      background: url('~@/assets/images/image-icon.png');
+    }
+
+    &[icon=video] {
+      background: url('~@/assets/images/video-icon.png');
+    }
+
+    &[icon=document] {
+      background: url('~@/assets/images/text-icon.png');
+    }
+  }
+
+  ///deep/ .uploader-file-actions > span {
+  .uploader-file-actions > span {
+    margin-right: 6px;
+  }
+}
+
+/* 隐藏上传按钮 */
+#global-uploader-btn {
+  clip: rect(0, 0, 0, 0);
+}
+
+
+/*.uploader-list>ul>li{*/
+/*  width:100%;*/
+/*  color:red;*/
+/*  margin-bottom: 0;*/
+/*}*/
+/*a {*/
+/*  color: #42b983;*/
+/*}*/
 </style>
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 9171799..8a960f1 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 import uploader from 'vue-simple-uploader'
+import jquery from 'jquery'
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
@@ -76,6 +77,8 @@ Vue.use(VueMeta)
 Vue.use(uploader)
 DictData.install()
 
+window.$ = window.jQuery = jquery
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
diff --git a/ruoyi-ui/src/views/official/index/index.vue b/ruoyi-ui/src/views/official/index/index.vue
index 7bdb20f..550f7a3 100644
--- a/ruoyi-ui/src/views/official/index/index.vue
+++ b/ruoyi-ui/src/views/official/index/index.vue
@@ -180,6 +180,10 @@
         <el-form-item label="图片上传地址" prop="imageurl">
           <ImageUploadLochost v-model="form.imageurl" :limit="1" :fileSize="10" />
         </el-form-item>
+        <el-form-item label="视频上传地址" prop="videoLink">
+          <FragmentUpload v-model="form.videoLink" />
+          <div>{{ form.videoLink }}</div>
+        </el-form-item>
         <el-form-item label="中文描述" prop="titleChinese">
           <el-input
             type="textarea"
@@ -202,6 +206,9 @@
             <el-radio label="1">是</el-radio>
           </el-radio-group>
         </el-form-item> -->
+        <el-form-item label="链接地址" prop="twLink">
+          <el-input v-model="form.twLink" placeholder="请输入链接地址" />
+        </el-form-item>
         <el-form-item label="排序" prop="orders">
           <el-input-number v-model="form.orders" :min="0" />
         </el-form-item>
@@ -259,6 +266,7 @@ export default {
       // 表单参数
       form: {
         imageurl: '',
+        videoLink: '',
         fileType: '0',
         isIndex: '0',
         captionName: '',
@@ -412,6 +420,7 @@ export default {
       this.form = {
         id: undefined,
         imageurl: '',
+        videoLink: '',
         fileType: '0',
         businessType: undefined,
         businessName: undefined,
@@ -426,6 +435,7 @@ export default {
         updateUserId: undefined,
         updateTime: undefined,
         orders: 0,
+        twLink: '',
       };
       this.resetForm("form");
     },