@fonixtree/magic-design 2.0.162 → 2.0.164

package/lib/common/ImageModal/index.less

@@ -0,0 +1,34 @@
+.catg_tree_container {
+  .search_container {
+    margin-bottom: 15px;
+  }
+
+  .cylon-tree-title {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+  }
+
+
+}
+
+.catg_img {
+  .cylon-spin-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .cylon-upload-list-item-thumbnail {
+    img {
+      object-fit: contain;
+    }
+  }
+}
+
+.image-modal-process-wrap {
+  margin-left: auto;
+  width: 300px;
+  padding-right: 60px;
+}

package/lib/common/ImageModal/utils.js

@@ -0,0 +1,609 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calFileMd5Fn = calFileMd5Fn;
+exports.checkFileFn = checkFileFn;
+exports.fileUpload = exports.chunksUpload = void 0;
+exports.getUploadParamCodeConfig = getUploadParamCodeConfig;
+exports.sliceFileUploadFn = sliceFileUploadFn;
+exports.sliceFn = sliceFn;
+exports.tellBackendMergeFn = tellBackendMergeFn;
+exports.uploadFileCheck = void 0;
+
+var _antd = require("antd4");
+
+var _sparkMd = _interopRequireDefault(require("spark-md5"));
+
+var _commonUtil = require("../../utils/commonUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
+  var _ = {
+    label: 0,
+    sent: function sent() {
+      if (t[0] & 1) throw t[1];
+      return t[1];
+    },
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+
+    while (_) {
+      try {
+        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+        if (y = 0, t) op = [op[0] & 2, t.value];
+
+        switch (op[0]) {
+          case 0:
+          case 1:
+            t = op;
+            break;
+
+          case 4:
+            _.label++;
+            return {
+              value: op[1],
+              done: false
+            };
+
+          case 5:
+            _.label++;
+            y = op[1];
+            op = [0];
+            continue;
+
+          case 7:
+            op = _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+
+          default:
+            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+              _ = 0;
+              continue;
+            }
+
+            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+              _.label = op[1];
+              break;
+            }
+
+            if (op[0] === 6 && _.label < t[1]) {
+              _.label = t[1];
+              t = op;
+              break;
+            }
+
+            if (t && _.label < t[2]) {
+              _.label = t[2];
+
+              _.ops.push(op);
+
+              break;
+            }
+
+            if (t[2]) _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+        }
+
+        op = body.call(thisArg, _);
+      } catch (e) {
+        op = [6, e];
+        y = 0;
+      } finally {
+        f = t = 0;
+      }
+    }
+
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+
+// 定义文件上传状态码
+var fileStatus = {
+  0: '文件不存在（没有上传过）',
+  1: '文件已存在（曾经上传过）',
+  2: '文件不完整（曾经上传中断过，可继续上传）',
+  3: '文件已恢复（曾经删除，已恢复）'
+};
+/**
+ * 发请求，校验文件是否上传过，分三种情况：见：fileStatus
+ * */
+
+function checkFileFn(_a) {
+  var fileMd5 = _a.fileMd5,
+      contentCatgId = _a.contentCatgId,
+      fileName = _a.fileName;
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_b) {
+      switch (_b.label) {
+        case 0:
+          return [4
+          /*yield*/
+          , (0, _commonUtil.commonFetch)('/designer/v1/bigfile/check', {
+            fileHash: fileMd5,
+            contentCatgId: contentCatgId,
+            fileName: fileName
+          }, 'post')];
+
+        case 1:
+          return [2
+          /*return*/
+          , _b.sent()];
+      }
+    });
+  });
+} // 文件分片函数
+
+
+function sliceFn(file, chunkSize) {
+  var result = []; // 从第0字节开始切割，一次切割1 * 1024 * 1024字节
+
+  for (var i = 0; i < file.size; i += chunkSize) {
+    result.push(file.slice(i, i + chunkSize));
+  }
+
+  return result;
+}
+/**
+ * 分片上传请求接口
+ * */
+
+
+function sliceFileUploadFn(formData) {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          return [4
+          /*yield*/
+          , (0, _commonUtil.commonFetch)('/designer/v1/bigfile/upload', formData, 'post')];
+
+        case 1:
+          return [2
+          /*return*/
+          , _a.sent()];
+      }
+    });
+  });
+}
+/** 获取上传分包配置 */
+
+
+function getUploadParamCodeConfig() {
+  return __awaiter(this, void 0, void 0, function () {
+    var paramConfig, res, findMaxSize, findChunkSize, error_1;
+    return __generator(this, function (_a) {
+      switch (_a.label) {
+        case 0:
+          _a.trys.push([0, 2,, 3]);
+
+          if (window._videoParamConfig) {
+            return [2
+            /*return*/
+            , window._videoParamConfig];
+          }
+
+          paramConfig = {};
+          return [4
+          /*yield*/
+          , (0, _commonUtil.commonFetch)('/designer/v1/params', {
+            paramCodes: ['designer.upload.file.maxSize', 'designer.upload.file.chunkSize'].join(',')
+          })];
+
+        case 1:
+          res = _a.sent();
+          findMaxSize = res.find(function (item) {
+            return item.paramCode == 'designer.upload.file.maxSize';
+          });
+
+          if (findMaxSize) {
+            paramConfig.maxSize = Number(findMaxSize.paramValue);
+          }
+
+          findChunkSize = res.find(function (item) {
+            return item.paramCode == 'designer.upload.file.chunkSize';
+          });
+
+          if (findChunkSize) {
+            paramConfig.chunkSize = Number(findChunkSize.paramValue);
+          }
+
+          window._videoParamConfig = paramConfig;
+          return [2
+          /*return*/
+          , window._videoParamConfig];
+
+        case 2:
+          error_1 = _a.sent();
+          console.error('获取上传配置失败: ', error_1);
+          return [2
+          /*return*/
+          , {
+            maxSize: 50 * 1024 * 1024,
+            chunkSize: 20 * 1024 * 1024
+          }];
+
+        case 3:
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+}
+/**
+ * 告知后端要去合并前端上传的文件了
+ * */
+
+
+function tellBackendMergeFn(_a) {
+  var fileName = _a.fileName,
+      contentCatgId = _a.contentCatgId,
+      fileMd5 = _a.fileMd5,
+      chunks = _a.chunks;
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_b) {
+      switch (_b.label) {
+        case 0:
+          return [4
+          /*yield*/
+          , (0, _commonUtil.commonFetch)('/designer/v1/bigfile/merge', {
+            fileHash: fileMd5,
+            contentCatgId: contentCatgId,
+            fileName: fileName,
+            chunks: chunks
+          }, 'post')];
+
+        case 1:
+          return [2
+          /*return*/
+          , _b.sent()];
+      }
+    });
+  });
+}
+/**
+ * 计算文件的md5值的函数
+ *      chunks是blob数组，提前切割好备用 例：[Blob, ... , Blob]
+ *      progressCallbackFn进度回调函数
+ * */
+
+
+function calFileMd5Fn(chunks, progressCallbackFn) {
+  return new Promise(function (resolve, reject) {
+    // 准备从第0块开始读
+    var currentChunk = 0; // 实例化SparkMD5用于计算文件hash值
+
+    var spark = new _sparkMd["default"].ArrayBuffer(); // 实例化文件阅读器用于读取blob二进制文件
+
+    var fileReader = new FileReader(); // 兜一下错
+
+    fileReader.onerror = reject; // 文件读取器的onload方法表示读取完成，只要读取就会触发
+
+    fileReader.onload = function (e) {
+      if (progressCallbackFn) {
+        progressCallbackFn(Math.ceil(currentChunk / chunks.length * 100)); // 抛出一个函数，用于告知进度
+      }
+
+      spark.append(e.target.result); // 将二进制文件追加到spark中（官方方法）
+
+      currentChunk += 1; // 这个读完就加1，读取下一个blob
+      // 若未读取到最后一块，就继续读取；否则读取完成，Promise带出结果
+
+      if (currentChunk < chunks.length) {
+        fileReader.readAsArrayBuffer(chunks[currentChunk]);
+      } else {
+        resolve(spark.end()); // resolve出去告知结果
+      }
+    }; // 文件读取器的readAsArrayBuffer方法开始读取文件，从blob数组中的第0项开始
+
+
+    fileReader.readAsArrayBuffer(chunks[currentChunk]);
+  });
+}
+/**
+ * 第三步，上传文件（分片上传，一片文件就是一个请求）
+ * */
+
+
+var fileUpload = function fileUpload(_a, cb) {
+  var formDataList = _a.formDataList,
+      fileName = _a.fileName,
+      contentCatgId = _a.contentCatgId,
+      fileMd5 = _a.fileMd5,
+      chunks = _a.chunks;
+  return __awaiter(void 0, void 0, void 0, function () {
+    var count, requestListFn, res, error_2;
+    return __generator(this, function (_b) {
+      switch (_b.label) {
+        case 0:
+          count = 0;
+          requestListFn = formDataList.map(function (_a) {
+            var formData = _a.formData;
+            return __awaiter(void 0, void 0, void 0, function () {
+              var res;
+              return __generator(this, function (_b) {
+                switch (_b.label) {
+                  case 0:
+                    return [4
+                    /*yield*/
+                    , sliceFileUploadFn(formData)];
+
+                  case 1:
+                    res = _b.sent();
+                    count += 1;
+                    cb(count / formDataList.length * 100);
+                    return [2
+                    /*return*/
+                    , res];
+                }
+              });
+            });
+          });
+          _b.label = 1;
+
+        case 1:
+          _b.trys.push([1, 4,, 5]);
+
+          return [4
+          /*yield*/
+          , Promise.all(requestListFn)];
+
+        case 2:
+          _b.sent();
+
+          return [4
+          /*yield*/
+          , tellBackendMergeFn({
+            contentCatgId: contentCatgId,
+            fileName: fileName,
+            fileMd5: fileMd5,
+            chunks: chunks
+          })];
+
+        case 3:
+          res = _b.sent();
+
+          if (res.uploadState === 0) {
+            console.log('文件并合成功');
+          }
+
+          return [3
+          /*break*/
+          , 5];
+
+        case 4:
+          error_2 = _b.sent();
+          console.log(error_2);
+          return [3
+          /*break*/
+          , 5];
+
+        case 5:
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+};
+
+exports.fileUpload = fileUpload;
+
+var uploadFileCheck = function uploadFileCheck(_a, chunks, fileName, cb) {
+  var fileMd5 = _a.fileMd5,
+      contentCatgId = _a.contentCatgId;
+  return __awaiter(void 0, void 0, void 0, function () {
+    var doneFileList, res, formDataList;
+    return __generator(this, function (_b) {
+      switch (_b.label) {
+        case 0:
+          doneFileList = [];
+          return [4
+          /*yield*/
+          , checkFileFn({
+            fileMd5: fileMd5,
+            contentCatgId: contentCatgId,
+            fileName: fileName
+          })];
+
+        case 1:
+          res = _b.sent(); // 等于1曾经上传过，不需要再上传了
+
+          if (res.uploadState == 1) {
+            _antd.message.warning(fileStatus[res.uploadState]);
+
+            return [2
+            /*return*/
+            ]; // 拦截停下
+          } // 曾经删除过，已恢复 不需要上传
+
+
+          if (res.uploadState == 3) {
+            _antd.message.warning(fileStatus[res.uploadState]);
+
+            return [2
+            /*return*/
+            ]; // 拦截停下
+          } // 等于2表示曾经上传过一部分，现在要继续上传
+
+
+          if (res.uploadState == 2) {
+            // 若是文件曾上传过一部分，后端会返回上传过得部分的文件索引，前端通过索引可以知道哪些
+            // 上传过，做一个过滤，已上传的文件就不用继续上传了，上传未上传过的文件片
+            doneFileList = res.chunkNames.map(function (item) {
+              return item * 1; // 后端给到的是字符串索引，这里转成数字索引
+            });
+            console.log(fileStatus[res.uploadState]);
+          } // 等于0表示没有上传过，直接上传
+
+
+          if (res.uploadState == 0) {
+            console.log(fileStatus[res.uploadState]);
+          }
+
+          formDataList = []; // 说明没有上传过，组装一下，直接使用
+
+          if (doneFileList.length == 0) {
+            formDataList = chunks.map(function (item, index) {
+              // 后端接参大致有：文件片、文件分的片数、每次上传是第几片(索引)、文件名、此完整大文件hash值
+              // 具体后端定义的参数prop属性名，看他们如何定义的，这个无妨...
+              var formData = new FormData();
+              formData.append('file', item); // 使用FormData可以将blob文件转成二进制binary
+
+              formData.append('chunks', chunks.length);
+              formData.append('chunk', index);
+              formData.append('contentCatgId', contentCatgId);
+              formData.append('fileName', fileName);
+              formData.append('fileHash', fileMd5);
+              return {
+                formData: formData
+              };
+            });
+          } else {
+            formDataList = chunks.filter(function (_, index) {
+              return !doneFileList.includes(index);
+            }).map(function (item, index) {
+              var formData = new FormData();
+              formData.append('file', item); // 使用FormData可以将blob文件转成二进制binary
+
+              formData.append('chunks', chunks.length);
+              formData.append('chunk', index);
+              formData.append('contentCatgId', contentCatgId);
+              formData.append('fileName', fileName);
+              formData.append('fileHash', fileMd5);
+              return {
+                formData: formData
+              };
+            });
+          }
+
+          return [4
+          /*yield*/
+          , fileUpload({
+            formDataList: formDataList,
+            fileName: fileName,
+            contentCatgId: contentCatgId,
+            fileMd5: fileMd5,
+            chunks: chunks.length
+          }, cb)];
+
+        case 2:
+          _b.sent();
+
+          return [2
+          /*return*/
+          ];
+      }
+    });
+  });
+};
+
+exports.uploadFileCheck = uploadFileCheck;
+
+var chunksUpload = function chunksUpload(_a, cb) {
+  var file = _a.file,
+      contentCatgId = _a.contentCatgId;
+  return __awaiter(void 0, void 0, void 0, function () {
+    var CHUNK_SIZE, chunks, fileMd5;
+    return __generator(this, function (_b) {
+      switch (_b.label) {
+        case 0:
+          return [4
+          /*yield*/
+          , getUploadParamCodeConfig()];
+
+        case 1:
+          CHUNK_SIZE = _b.sent().chunkSize;
+          chunks = sliceFn(file, CHUNK_SIZE);
+          return [4
+          /*yield*/
+          , calFileMd5Fn(chunks)];
+
+        case 2:
+          fileMd5 = _b.sent();
+          return [4
+          /*yield*/
+          , uploadFileCheck({
+            fileMd5: fileMd5,
+            contentCatgId: contentCatgId
+          }, chunks, file.name, cb)];
+
+        case 3:
+          _b.sent(); // 然后执行文件检查操作
+
+
+          return [2
+          /*return*/
+          , true];
+      }
+    });
+  });
+};
+
+exports.chunksUpload = chunksUpload;