eoss-ui 0.8.22 → 0.8.24

package/packages/upload/src/main.vue

@@ -10,6 +10,8 @@
     :height="boxHeight"
     :multiple="portrait ? false : multiple"
     :action="uploadUrl"
+    :http-request="chunkHttpRequest"
+    :handles="chunkHandles"
     :show-file-list="showList"
     :file-list="lists"
     :result-file="resultFile"
@@ -98,10 +100,8 @@
               :type="selectType"
               :size="btnSize"
               :disabled="isDisabled"
-              >{{
-                text ? text : autoUpload ? '点击上传' : '选择文件'
-              }}</el-button
-            >
+              >{{ text ? text : autoUpload ? '点击上传' : '选择文件' }}
+            </el-button>
             <el-button
               class="es-upload-button"
               v-if="!autoUpload"
@@ -178,23 +178,29 @@
 </template>
 <script>
 import {
-  getAdjunctProperties,
-  uploads,
-  uploadOnlyOne,
+  chunkCheckFile,
+  chunkMergeChunk,
+  chunkUploadChunk,
+  delAdjunct,
+  downloadByAdjunctId,
   getAdjunctFileInfos,
-  uploadDownloads,
-  previewAdjunctOffice,
+  getAdjunctProperties,
+  getDochubBucket,
   previewAdjunct,
   previewAdjunct2,
-  uploadSort,
-  delAdjunct,
-  downloadByAdjunctId
+  previewAdjunctOffice,
+  uploadDownloads,
+  uploadOnlyOne,
+  uploads,
+  uploadSort
 } from 'eoss-ui/src/config/api.js';
 import { debounce } from 'throttle-debounce';
 import util from 'eoss-ui/src/utils/util.js';
 import picture from './picture.js';
 import store from 'eoss-ui/src/utils/store';
 import { Base64 } from 'js-base64';
+import SparkMD5 from 'spark-md5';
+
 export default {
   name: 'EsUpload',
   components: {
@@ -446,7 +452,9 @@ export default {
       boxHeight: this.listHeight,
       previewAdjunct: previewAdjunct,
       kkfileview: null,
-      dochubConfig: {}
+      dochubConfig: {},
+      // 文档中台桶配置下发的分片上传配置（baseBucketConfig），null 表示未下发 → 回退组件 props
+      bucketChunkConfig: null
     };
   },
   computed: {
@@ -635,6 +643,80 @@ export default {
         }
       }
       return this.photo;
+    },
+    // 是否走分片上传：完全由后台桶配置（/v2/chunk/config）的开关决定，且具备桶编码(code)与业务id(ownId)
+    isChunk() {
+      const cfg = this.bucketChunkConfig;
+      return !!(cfg && cfg.enableChunkUpload) && !!this.code && !!this.ownId;
+    },
+    // 生效的分片大小（字节）：桶配置 > 默认 5MB
+    _chunkSize() {
+      const cfg = this.bucketChunkConfig;
+      return (
+        (cfg && Number(cfg.chunkSize) > 0 && Number(cfg.chunkSize)) ||
+        5 * 1024 * 1024
+      );
+    },
+    // 生效的分片并发数：桶配置 > 默认 3
+    _chunkConcurrent() {
+      const cfg = this.bucketChunkConfig;
+      return (
+        (cfg &&
+          Number(cfg.chunkConcurrent) > 0 &&
+          Number(cfg.chunkConcurrent)) ||
+        3
+      );
+    },
+    // 分片三接口地址：优先 dochubConfig 下发，否则回退 api.js 常量（与本组件 dochubConfig.x || 常量 的写法一致）
+    chunkUrls() {
+      const cfg = this.dochubConfig || {};
+      return {
+        check: cfg.chunkCheckUrl || chunkCheckFile,
+        upload: cfg.chunkUploadUrl || chunkUploadChunk,
+        merge: cfg.chunkMergeUrl || chunkMergeChunk
+      };
+    },
+    // 传给 el-upload 的自定义上传实现；非分片模式返回 undefined 以走默认上传
+    chunkHttpRequest() {
+      return this.isChunk ? this.chunkUpload : undefined;
+    },
+    // 操作列按钮：非分片模式回退用户经 $attrs 传入的 handles（或 undefined → el-upload 默认），
+    // 分片模式注入"暂停/继续"并保留预览/下载/删除（emit 复用既有事件链）。仅分片模式改变渲染，不影响存量业务。
+    chunkHandles() {
+      if (!this.isChunk) return this.$attrs.handles;
+      const done = (f) => f.status === 'success' || f.status == 0;
+      return [
+        {
+          icon: 'el-icon-video-pause',
+          title: '暂停',
+          rules: (f) => this.isChunkUploading(f) && !f.chunkPaused,
+          event: (f) => this.pauseUpload(f)
+        },
+        {
+          icon: 'el-icon-video-play',
+          title: '继续',
+          rules: (f) => this.isChunkUploading(f) && !!f.chunkPaused,
+          event: (f) => this.resumeUpload(f)
+        },
+        {
+          icon: 'el-icon-document-copy',
+          title: '预览',
+          rules: (f) => !!this.preview && done(f),
+          emit: 'preview'
+        },
+        {
+          icon: 'el-icon-download',
+          title: '下载',
+          rules: (f) => this.isDownload && done(f),
+          emit: 'download'
+        },
+        {
+          icon: 'el-icon-delete',
+          title: '删除',
+          rules: (f) => this.isRemove,
+          emit: 'remove'
+        }
+      ];
     }
   },
   watch: {
@@ -701,6 +783,8 @@ export default {
     });
   },
   created() {
+    // 分片上传的运行态（按 file.uid 索引，非响应式，仅用于流程控制）
+    this._chunkState = {};
     const dochubConfig = sessionStorage.getItem('dochubConfig');
     if (dochubConfig) {
       this.dochubConfig = JSON.parse(dochubConfig);
@@ -737,6 +821,11 @@ export default {
           this.fileTotalSize = config.totalSize;
           if (config.dochubConfig) {
             this.dochubConfig = config.dochubConfig;
+            if (config.bucketChunkConfig !== undefined) {
+              this.bucketChunkConfig = config.bucketChunkConfig;
+            } else {
+              this.getBucketChunkConfig();
+            }
           }
 
           let url =
@@ -772,6 +861,8 @@ export default {
                       'dochubConfig',
                       JSON.stringify(res.results.dochubConfig)
                     );
+                    // dochubConfig 有数据 → 走文档中台，再拉取该桶的桶配置（分片上传开关/参数）
+                    this.getBucketChunkConfig();
                   }
                   let url = this.portrait
                     ? this.dochubConfig.reuploadDocumentUrl || uploadOnlyOne
@@ -803,6 +894,42 @@ export default {
         }
       }
     },
+    // 根据桶编码调中台获取桶配置接口（/v2/getBucket），取 baseBucketConfig 中的分片上传开关与参数。
+    getBucketChunkConfig() {
+      if (!this.code) return;
+      let url = getDochubBucket;
+      util
+        .ajax({
+          method: this.method,
+          url: url,
+          data: { bucketCode: this.code },
+          params: { bucketCode: this.code }
+        })
+        .then((res) => {
+          if (res.rCode === 0 && res.results && res.results.baseBucketConfig) {
+            const cfg = res.results.baseBucketConfig;
+            this.bucketChunkConfig = {
+              enableChunkUpload: cfg.enableChunkUpload,
+              chunkSize: cfg.chunkSize,
+              chunkConcurrent: cfg.chunkConcurrent
+            };
+          } else {
+            this.bucketChunkConfig = null;
+          }
+          // 回写本地缓存，避免同 code 的其他实例重复请求
+          let cached = store.get(this.code);
+          if (cached) {
+            store.set(this.code, {
+              ...cached,
+              bucketChunkConfig: this.bucketChunkConfig
+            });
+          }
+        })
+        .catch(() => {
+          // 桶配置获取失败不阻断上传，维持 props 行为
+          this.bucketChunkConfig = null;
+        });
+    },
     getFileLists() {
       if (
         !this.show ||
@@ -1226,7 +1353,12 @@ export default {
         if (this.onSort) {
           this.onSort(files);
         } else {
-          if (!this.ownId || !this.code || (this.fileList && this.fileList.length > 0)) return;
+          if (
+            !this.ownId ||
+            !this.code ||
+            (this.fileList && this.fileList.length > 0)
+          )
+            return;
           let ids = files.map((item) => {
             if (item.status === 'success' || item.status == 0) {
               return item.adjunctId || item.response.adjunctId;
@@ -1318,6 +1450,7 @@ export default {
       this.onChange && this.onChange(file, fileList);
     },
     handleRemove(file, fileList) {
+      this.cleanupChunk(file);
       this.$emit('input', fileList.length ? fileList : '');
       this.$emit('remove', file, fileList);
       this.$emit('change', fileList);
@@ -1339,6 +1472,341 @@ export default {
       }
       this.$emit('error', err, file, fileList);
       this.onError && this.onError(err, file, fileList);
+    },
+    // el-upload 的自定义上传实现：建立可暂停的运行态并返回受控 Promise。
+    // 暂停时不 resolve/reject（promise 维持 pending，文件保持"上传中"而非失败），继续时再次进入流程。
+    chunkUpload(options) {
+      const file = options.file;
+      const uid = file.uid;
+      const state = {
+        paused: false,
+        controller: null,
+        fileMd5: '',
+        totalChunks: Math.max(1, Math.ceil(file.size / this._chunkSize)),
+        options: options
+      };
+      this._chunkState[uid] = state;
+      return new Promise((resolve, reject) => {
+        state.resolve = resolve;
+        state.reject = reject;
+        this.runChunkFlow(uid);
+      });
+    },
+    // 分片主流程（可被"继续"重新进入）：MD5(缓存) → 秒传/断点续传检测 → 并发上传缺失分片 → 合并入库。
+    runChunkFlow(uid) {
+      const state = this._chunkState[uid];
+      if (!state) return;
+      const options = state.options;
+      const file = options.file;
+      const onProgress = options.onProgress || function () {};
+      const baseParams = () => ({
+        ...this.param,
+        fileMd5: state.fileMd5,
+        fileName: file.name,
+        fileSize: file.size,
+        totalChunks: state.totalChunks,
+        bucketCode: this.code,
+        businessId: this.ownId
+      });
+      const isAbort = (e) =>
+        !!e &&
+        (e.__aborted === true ||
+          e.name === 'CanceledError' ||
+          e.name === 'AbortError' ||
+          (typeof e.message === 'string' && /cancel|abort/i.test(e.message)));
+
+      Promise.resolve()
+        .then(() => state.fileMd5 || this.computeFileMd5(file, onProgress))
+        .then((md5) => {
+          state.fileMd5 = md5;
+          if (state.paused) return null;
+          return util.ajax({
+            method: 'post',
+            url: this.chunkUrls.check,
+            data: baseParams(),
+            params: baseParams(),
+            headers: options.headers
+          });
+        })
+        .then((checkRes) => {
+          if (!checkRes) return; // 暂停于 MD5/检测阶段，维持 pending
+          if (checkRes.rCode !== 0) return Promise.reject(checkRes);
+          const info = checkRes.results || {};
+          // 秒传命中：该业务桶下已存在同 MD5 文件，直接视为成功
+          if (info.instant) {
+            onProgress({ percent: 100 });
+            this.normalizeChunkDoc(info, file.name);
+            this.finishChunk(uid, {
+              rCode: 0,
+              msg: checkRes.msg || '秒传成功',
+              results: info
+            });
+            // 秒传文件已存在于服务端，刷新列表以展示其完整信息（含可下载/预览的 id）
+            this.requestFiles && this.getFiles();
+            return;
+          }
+          // 断点续传：跳过服务端已存在的分片
+          const uploaded = new Set(info.uploadedChunks || []);
+          const pending = [];
+          for (let i = 0; i < state.totalChunks; i++) {
+            if (!uploaded.has(i)) pending.push(i);
+          }
+          let finished = state.totalChunks - pending.length;
+          // 上传阶段占 5~95%（MD5 校验已占 0~5%），保证进度单调不回退
+          onProgress({
+            percent: Math.min(
+              95,
+              5 + Math.round((finished / state.totalChunks) * 90)
+            )
+          });
+          state.controller =
+            typeof AbortController !== 'undefined'
+              ? new AbortController()
+              : null;
+          const signal = state.controller ? state.controller.signal : undefined;
+          return this.runChunkQueue(pending, this._chunkConcurrent, (index) => {
+            if (state.paused) return Promise.reject({ __aborted: true });
+            return this.uploadOneChunk(
+              file,
+              index,
+              state.totalChunks,
+              state.fileMd5,
+              options.headers,
+              signal
+            ).then(() => {
+              finished++;
+              onProgress({
+                percent: Math.min(
+                  95,
+                  5 + Math.round((finished / state.totalChunks) * 90)
+                )
+              });
+            });
+          }).then(() => {
+            if (state.paused) return; // 暂停于上传阶段，维持 pending
+            return util
+              .ajax({
+                method: 'post',
+                url: this.chunkUrls.merge,
+                data: baseParams(),
+                params: baseParams(),
+                headers: options.headers
+              })
+              .then((mergeRes) => {
+                if (mergeRes.rCode !== 0) return Promise.reject(mergeRes);
+                onProgress({ percent: 100 });
+                this.normalizeChunkDoc(mergeRes.results, file.name);
+                this.finishChunk(uid, mergeRes);
+                // 刷新列表：让刚入库的文件以与其他行一致的结构展示（时间/大小/上传人等）
+                this.requestFiles && this.getFiles();
+              });
+          });
+        })
+        .catch((e) => {
+          // 暂停导致的中止：保持 pending 等待"继续"；其余才算失败
+          if (state.paused || isAbort(e)) return;
+          this.failChunk(uid, e);
+        });
+    },
+    // 暂停：置暂停标记并中止在传分片；promise 维持 pending，文件保持"上传中"
+    pauseUpload(file) {
+      const state = file && this._chunkState[file.uid];
+      if (!state) return;
+      state.paused = true;
+      if (state.controller) {
+        try {
+          state.controller.abort();
+        } catch (e) {
+          /* ignore */
+        }
+      }
+      this.$set(file, 'chunkPaused', true);
+      this.$emit('chunk-pause', file);
+    },
+    // 继续：清暂停标记，重新进入流程（checkFile 会返回已传分片，自动续传）
+    resumeUpload(file) {
+      const state = file && this._chunkState[file.uid];
+      if (!state || !state.paused) return; // 仅暂停态可续传，防止重复触发并发流程
+      state.paused = false;
+      this.$set(file, 'chunkPaused', false);
+      this.$emit('chunk-resume', file);
+      this.runChunkFlow(file.uid);
+    },
+    // 该文件是否处于分片上传运行态（用于操作列按钮显隐）
+    isChunkUploading(file) {
+      return !!(file && this._chunkState && this._chunkState[file.uid]);
+    },
+    // 归一化合并响应：dochub Document 用 docTagId 标识、且无 suffix 字段，
+    // 而组件下载读 adjunctId、预览读 suffix/originalName，这里统一映射补齐，避免预览取 suffix 报错。
+    normalizeChunkDoc(results, fileName) {
+      if (!results || typeof results !== 'object') return results;
+      const id =
+        results.adjunctId ||
+        results.docTagId ||
+        results.documentId ||
+        results.id;
+      if (id) {
+        if (!results.adjunctId) results.adjunctId = id;
+        if (!results.documentId) results.documentId = id;
+      }
+      // 文件名：优先用上传时的原始名，其次后端 documentFile.docName
+      const name =
+        fileName ||
+        (results.documentFile && results.documentFile.docName) ||
+        results.originalName ||
+        results.name ||
+        '';
+      if (!results.originalName && name) results.originalName = name;
+      // 后缀：预览按后缀判断类型，缺省从文件名推导；始终保证为字符串
+      if (results.suffix === undefined || results.suffix === null) {
+        results.suffix =
+          name && name.lastIndexOf('.') > -1
+            ? name.slice(name.lastIndexOf('.') + 1)
+            : '';
+      }
+      // 展示字段：dochub 的元数据在 documentFile 下且字段名不同，映射成 showInfo 默认读取的扁平字段
+      const df = results.documentFile;
+      if (df && typeof df === 'object') {
+        if (!results.uploadTime) {
+          results.uploadTime = df.createTime || df.lastModifyTime || '';
+        }
+        if (!results.userName) {
+          results.userName = df.createUserName || df.lastModifyUserName || '';
+        }
+        if (!results.fileSize && (df.docSize || df.docSize === 0)) {
+          results.fileSize = this.formatFileSize(df.docSize);
+        }
+      }
+      return results;
+    },
+    // 字节数格式化为可读大小（与列表展示风格一致：1 位小数、无空格）
+    formatFileSize(bytes) {
+      const n = Number(bytes);
+      if (!n || n <= 0) return '0B';
+      if (n >= 1073741824) return (n / 1073741824).toFixed(1) + 'GB';
+      if (n >= 1048576) return (n / 1048576).toFixed(1) + 'MB';
+      if (n >= 1024) return (n / 1024).toFixed(1) + 'KB';
+      return n + 'B';
+    },
+    // 完成：兑现 promise 并清理运行态
+    finishChunk(uid, response) {
+      const state = this._chunkState[uid];
+      if (!state) return;
+      state.resolve && state.resolve(response);
+      delete this._chunkState[uid];
+    },
+    // 失败：拒绝 promise 并清理运行态
+    failChunk(uid, err) {
+      const state = this._chunkState[uid];
+      if (!state) return;
+      state.reject && state.reject(err);
+      delete this._chunkState[uid];
+    },
+    // 移除文件时清理分片运行态（中止在传分片，孤立 pending promise 不再触发回调）
+    cleanupChunk(file) {
+      const uid = file && file.uid;
+      const state = uid && this._chunkState && this._chunkState[uid];
+      if (!state) return;
+      state.paused = true;
+      state.resolve = null;
+      state.reject = null;
+      if (state.controller) {
+        try {
+          state.controller.abort();
+        } catch (e) {
+          /* ignore */
+        }
+      }
+      delete this._chunkState[uid];
+    },
+    // 上传单个分片（multipart/form-data）；signal 用于暂停时中止
+    uploadOneChunk(file, index, totalChunks, fileMd5, headers, signal) {
+      const start = index * this._chunkSize;
+      const end = Math.min(start + this._chunkSize, file.size);
+      const formData = new FormData();
+      formData.append('file', file.slice(start, end), file.name);
+      formData.append('fileMd5', fileMd5);
+      formData.append('fileName', file.name);
+      formData.append('fileSize', file.size);
+      formData.append('chunkIndex', index);
+      formData.append('totalChunks', totalChunks);
+      formData.append('bucketCode', this.code);
+      formData.append('businessId', this.ownId);
+      Object.keys(this.param || {}).forEach((key) => {
+        formData.append(key, this.param[key]);
+      });
+      return util
+        .ajax({
+          method: 'post',
+          url: this.chunkUrls.upload,
+          data: formData,
+          format: false,
+          headers: headers,
+          signal: signal
+        })
+        .then((res) => {
+          if (res.rCode !== 0) return Promise.reject(res);
+          return res;
+        });
+    },
+    // 分块读取文件并增量计算 MD5（避免大文件一次性读入内存）
+    computeFileMd5(file, onProgress) {
+      return new Promise((resolve, reject) => {
+        const size = this._chunkSize;
+        const chunks = Math.max(1, Math.ceil(file.size / size));
+        const spark = new SparkMD5.ArrayBuffer();
+        const reader = new FileReader();
+        let current = 0;
+        const loadNext = () => {
+          const start = current * size;
+          reader.readAsArrayBuffer(
+            file.slice(start, Math.min(start + size, file.size))
+          );
+        };
+        reader.onload = (e) => {
+          spark.append(e.target.result);
+          current++;
+          // 校验阶段占进度 0~5%，剩余留给上传与合并
+          onProgress &&
+            onProgress({ percent: Math.round((current / chunks) * 5) });
+          if (current < chunks) {
+            loadNext();
+          } else {
+            // 取标准 32 位 MD5 的中间 16 位，与后端 hutool digestHex16（即 doc_md5）口径一致，
+            // 否则秒传按 md5 比对永远不命中
+            resolve(spark.end().substring(8, 24));
+          }
+        };
+        reader.onerror = () => reject({ msg: '文件读取失败，无法计算MD5' });
+        loadNext();
+      });
+    },
+    // 限制并发的分片任务队列
+    runChunkQueue(indexes, concurrency, worker) {
+      return new Promise((resolve, reject) => {
+        if (!indexes.length) return resolve();
+        let cursor = 0;
+        let active = 0;
+        let failed = false;
+        const schedule = () => {
+          if (failed) return;
+          if (cursor >= indexes.length && active === 0) return resolve();
+          while (active < concurrency && cursor < indexes.length) {
+            const index = indexes[cursor++];
+            active++;
+            worker(index)
+              .then(() => {
+                active--;
+                schedule();
+              })
+              .catch((err) => {
+                failed = true;
+                reject(err);
+              });
+          }
+        };
+        schedule();
+      });
     }
   }
 };