Prechádzať zdrojové kódy

调试上传管理器

zhangyu 5 rokov pred
rodič
commit
5198f6289a

+ 2 - 1
config/index.js

@@ -89,7 +89,8 @@ module.exports = {
                 changeOrigin: false
             },
             '/modelapi': {
-                target: 'http://192.168.20.225:8082',
+                // target: 'http://192.168.20.225:8082',
+                target: 'http://192.168.20.218:8082',//景灏
                 changeOrigin: true,
                 pathRewrite: {
                     "^/modelapi": "/"

+ 30 - 0
src/api/uploader/index.js

@@ -0,0 +1,30 @@
+import http from '../scan/httpUtil'
+
+const baseUrl = '/image-service'
+
+//分片上传文件接口
+
+/**
+ * info: 申请分片上传接口(获取上传UploadId)
+ * @param {systemId:string} param 系统的名称
+ * @param {secret:string} param 系统的密码
+ * @param {key:string} param  成功的回上传的文件名(可以包含文件路径)
+ * @param {overwrite:boolean} param 表示是否覆盖已有的文件(如果存在) 注:overwrite有一定风险, 只在注册分片时校验, 合并时候如果key被占用, 会覆盖掉之前文件
+ * 
+ */
+export function getUploadId(param, success) {
+  let url = ` ${baseUrl}/common/register_multipart_upload?systemId=${param.systemId}&secret=${param.secret}&key=${param.key}&overwrite=${param.overwrite}`
+  http.postJson(url, {}, success)
+}
+
+/**
+ * info: 合并分片的接口
+ * @param {systemId:string} param 系统的名称
+ * @param {secret:string} param 系统的密码
+ * @param {uploadId:string} param  需要合并的上传文件的uploadId
+ * 
+ */
+export function mergeMultipart(param, success) {
+  let url = ` ${baseUrl}/common/merge_multipart?systemId=${param.systemId}&secret=${param.secret}&uploadId=${param.uploadId}`
+  http.postJson(url, {}, success)
+}

+ 90 - 42
src/components/globaluploader/index.vue

@@ -1,3 +1,9 @@
+<!--
+ * @Author: zhangyu
+ * @Date: 2019-11-28 10:05:28
+ * @Info: 
+ * @LastEditTime: 2019-11-29 19:22:55
+ -->
 <template>
   <div id="global-uploader">
 
@@ -53,22 +59,18 @@
  *            Bus.$on('fileSuccess', fn); 文件上传成功的回调
  */
 
-// import {ACCEPT_CONFIG} from './js/config';
-import Bus from '@/utils/bus.js'
+import Bus from '@/utils/bus.js';
 import SparkMD5 from 'spark-md5';
-
-// 这两个是我自己项目中用的,请忽略
-// import {Ticket} from '@/assets/js/utils';
-// import api from '@/api';
+import { getUploadId, mergeMultipart } from '@/api/uploader';
 
 export default {
   data() {
     return {
       options: {
-        target: '',
-        chunkSize: 2*1024*1024,
-        fileParameterName: 'upfile',
-        maxChunkRetries: 3,
+        target: '/image-service/common/multipart_upload',
+        chunkSize: 1*1024*1024,
+        fileParameterName: 'file',
+        maxChunkRetries: 5,
         testChunks: false,   //是否开启服务器分片校验
         // 服务器分片校验函数,秒传及断点续传基础
         // checkChunkUploadedByResponse: function (chunk, message) {
@@ -82,8 +84,7 @@ export default {
         // headers: {
           // Authorization: Ticket.get() && "Bearer " + Ticket.get().access_token
         // },
-        method: 'octet',
-        query() {}
+        query: this.getFileQuery
       },
       attrs: {
         // accept: ACCEPT_CONFIG.getAll()
@@ -93,13 +94,35 @@ export default {
     }
   },   
   mounted() {
-    Bus.$on('openUploader', query => {
-      this.params = query || {};
-
-      if (this.$refs.uploadBtn) {
-        document.getElementById('global-uploader-btn').click();
-        // $('#global-uploader-btn').click();
+    Bus.$on('openUploader', (query, file) => {
+      if(query.uploadId){
+        // this.params = query || {};
+        file.uploadId = query.uploadId
+        this.uploader.addFile(file)
+      } else {
+        getUploadId({
+          systemId: query.systemId?query.systemId:'revit', 
+          secret: query.secret?query.secret:'63afbef6906c342b', 
+          overwrite: query.overwrite? query.overwrite: false,
+          key: file.name
+        }, res => {
+          if(res.UploadId){
+            // this.params = Object.assign(query, { uploadId: res.UploadId }) || {};
+            file = Object.assign(file, {
+              ...query,
+              uploadId: res.UploadId 
+            })
+            this.uploader.addFile(file)
+          } else {
+            this.$message.error(`请求分片上传接口失败!`);
+          }
+        })
       }
+
+      // if (this.$refs.uploadBtn) {
+      //   document.getElementById('global-uploader-btn').click();
+      //   // $('#global-uploader-btn').click();
+      // }
     });
   },
   computed: {
@@ -111,6 +134,7 @@ export default {
   methods: {
     onFileAdded(file) {
       this.panelShow = true;
+      this.collapse = true;
       this.computeMD5(file);
 
       Bus.$emit('fileAdded');
@@ -122,28 +146,27 @@ export default {
       let res = JSON.parse(response);
 
       // 服务器自定义的错误(即虽返回200,但是是错误的情况),这种错误是Uploader无法拦截的
-      if (!res.result) {
-        this.$message({ message: res.message, type: 'error' });
+      if (!res.Result || res.Result != 'success') {
+        this.$message({ message: res.ResultMsg?res.ResultMsg:'上传失败!', type: 'error' });
         // 文件状态设为“失败”
         this.statusSet(file.id, 'failed');
         return
       }
-
       // 如果服务端返回需要合并
-      if (res.needMerge) {
+      console.log('获取分片数',file.chunks.length)
+      if (parseInt(res.TotalCount) >= file.chunks.length) {
         // 文件状态设为“合并中”
         this.statusSet(file.id, 'merging');
-
-        api.mergeSimpleUpload({
-          tempName: res.tempName,
-          fileName: file.name,
-          ...this.params,
-        }).then(res => {
+        mergeMultipart({
+          systemId: file.file.systemId?file.file.systemId:'revit', 
+          secret: file.file.secret?file.file.secret:'63afbef6906c342b', 
+          uploadId: file.file.uploadId
+        }, res => {
           // 文件合并成功
           Bus.$emit('fileSuccess');
 
           this.statusRemove(file.id);
-        }).catch(e => {});
+        })
 
       // 不需要合并
       } else {
@@ -167,8 +190,8 @@ export default {
       let time = new Date().getTime();
       let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
       let currentChunk = 0;
-      const chunkSize = 2 * 1024 * 1024;
-      let chunks = Math.ceil(file.size / chunkSize);
+      const chunkSize = 1 * 1024 * 1024;
+      let chunks = Math.floor(file.size / chunkSize);
       let spark = new SparkMD5.ArrayBuffer();
 
       // 文件状态设为"计算MD5"
@@ -191,6 +214,7 @@ export default {
           })
         } else {
           let md5 = spark.end();
+          file.file.md5 = md5;
           this.computeMD5Success(md5, file);
           console.log(`MD5计算完毕:${file.name} \nMD5:${md5} \n分片:${chunks} 大小:${file.size} 用时:${new Date().getTime() - time} ms`);
         }
@@ -212,18 +236,26 @@ export default {
     computeMD5Success(md5, file) {
       // 将自定义参数直接加载uploader实例的opts上
       console.log(this.uploader)
-      Object.assign(this.uploader.opts, {
-        query: {
-            ...this.params,
-            Md5: md5
-        }
-      })
-
-      file.uniqueIdentifier = this.params.id;
+      // Object.assign(this.uploader.opts, {
+      //   query: {
+      //     uploadId: file.file.uploadId,
+      //     md5
+      //   }
+      // })
+
+      // file.uniqueIdentifier = this.params.uploadId;
       file.resume();
       this.statusRemove(file.id);
     },
 
+    //获取文件参数
+    getFileQuery(file, chunk) {
+      return {
+        uploadId: file.file.uploadId,
+        md5: file.file.md5
+      }
+    },
+
     fileListShow() {
       this.collapse = this.collapse? false: true;
 
@@ -243,9 +275,25 @@ export default {
       // }
     },
     close() {
-      this.uploader.cancel();
-
-      this.panelShow = false;
+      if(this.uploader.isUploading()) {
+        this.$alert(
+          "您有文件正在上传,关闭会中断上传,是否继续?",
+          "提示",
+          {
+            confirmButtonText: "确定",
+            callback: action => {
+              console.log(action);
+              if (action == "confirm") {
+                this.uploader.cancel();
+                this.panelShow = false;
+              } else { }
+            }
+          }
+        );
+      } else {
+        this.uploader.cancel();
+        this.panelShow = false;
+      }
     },
 
     /**

+ 5 - 0
src/components/model/file/addFloorDialog.vue

@@ -66,6 +66,7 @@
         <el-form-item>
           <el-button type="primary" @click="onSubmit">确认</el-button>
           <el-button @click="handleClose">取消</el-button>
+          <el-button @click="addDemo">测试上传按钮</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -74,6 +75,7 @@
 <script>
 import request from "@/api/model/file.js";
 import { mapGetters } from "vuex";
+import Bus from '@/utils/bus.js'
 export default {
   props: {
     addFloorFileVisible: Boolean,
@@ -133,6 +135,9 @@ export default {
     };
   },
   methods: {
+    addDemo(){
+      Bus.$emit('openUploader', {}, this.form.file.raw)
+    },
     onSubmit() {
       let FloorName = null;
       if (this.form.file == null) {

+ 0 - 7
src/views/model/file/index.vue

@@ -43,7 +43,6 @@
         <div class="top_hand right_top_hand">
           <el-button @click="addFloorFile">添加楼层文件</el-button>
           <el-button @click="queryFloorFile(currentFolderId)">刷新</el-button>
-          <el-button @click="addDemo">添加文件</el-button>
         </div>
         <!-- 列表 -->
         <floorTable ref="floorTable" :tableData="tableData" :modelFolderName="currentFolderName" @openModelLog="queryModelLog"
@@ -173,12 +172,6 @@ export default {
     Bus.$off('fileSuccess');
   },
   methods: {
-    addDemo(){
-      // 打开文件选择框
-      Bus.$emit('openUploader', {
-        id: '1111'  // 传入的参数
-      })
-    },
     // 以下是模型文件夹
 
     // 打开模型文件夹