@kmkf-fe-packages/basic-components 2.10.9-beta.12 → 2.10.9-beta.13

package/dist/index.esm.js

@@ -736,6 +736,12 @@ var ApaasUpload = function ApaasUpload(_ref) {
     resetProps = _objectWithoutProperties(_ref, _excluded$4);
   var inputRef = useRef(null);
   var valueRef = useRef(value);
+  // 当前批次的文件选择序号，用于按选择顺序展示上传结果
+  var batchSeqRef = useRef(0);
+  // 当前批次的上传结果，按序号存储，最后统一排序合并
+  var batchResultsRef = useRef(new Map());
+  // 当前批次正在处理的文件数，用于判断批次何时结束
+  var pendingCountRef = useRef(0);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
@@ -751,6 +757,32 @@ var ApaasUpload = function ApaasUpload(_ref) {
   useEffect(function () {
     valueRef.current = value;
   }, [value]);
+  // 获取当前批次的文件选择序号；没有正在处理的文件时视为新一批，重置批次状态
+  var acquireBatchSeq = function acquireBatchSeq() {
+    if (pendingCountRef.current === 0) {
+      batchSeqRef.current = 0;
+      batchResultsRef.current.clear();
+    }
+    return batchSeqRef.current++;
+  };
+  // 将单个文件结果存入当前批次，本批次全部完成时按选择顺序合并到 value
+  var appendResult = function appendResult(batchSeq, result) {
+    if (valueRef.current.length + batchResultsRef.current.size < maxCount) {
+      batchResultsRef.current.set(batchSeq, result);
+    }
+    pendingCountRef.current = Math.max(0, pendingCountRef.current - 1);
+    if (pendingCountRef.current === 0 && batchResultsRef.current.size > 0) {
+      var sorted = _toConsumableArray(batchResultsRef.current.entries()).sort(function (a, b) {
+        return a[0] - b[0];
+      }).map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          v = _ref3[1];
+        return v;
+      });
+      handleChange([].concat(_toConsumableArray(valueRef.current), _toConsumableArray(sorted)));
+      batchResultsRef.current.clear();
+    }
+  };
   var imgReader = function imgReader(item) {
     var blob = item.getAsFile(),
       reader = new FileReader();
@@ -758,14 +790,16 @@ var ApaasUpload = function ApaasUpload(_ref) {
       message.error("\u56FE\u7247\u4E0D\u80FD\u5927\u4E8E".concat(maxSize, "MB"));
       return;
     }
-    if (valueRef.current.length >= maxCount) {
+    if (valueRef.current.length + pendingCountRef.current >= maxCount) {
       message.error("\u53EA\u80FD\u4E0A\u4F20".concat(maxCount, "\u5F20\u56FE\u7247"));
       return;
     }
+    var batchSeq = acquireBatchSeq();
+    pendingCountRef.current += 1;
     reader.onload = function (e) {
       var _e$target;
       var result = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
-      handleChange([].concat(_toConsumableArray(valueRef.current), [result]));
+      appendResult(batchSeq, result);
     };
     reader.readAsDataURL(blob);
   };
@@ -798,7 +832,8 @@ var ApaasUpload = function ApaasUpload(_ref) {
   // 手动上传模式, 一直返回false
   var beforeUpload = function beforeUpload(file) {
     var size = file.size / 1024 / 1024 < maxSize;
-    if (value.length > maxCount) {
+    // 并发上传时用「已上传 + 待上传」一起判断，避免一次选多张时超出 maxCount
+    if (valueRef.current.length + pendingCountRef.current >= maxCount) {
       message.error("\u6700\u591A\u6DFB\u52A0".concat(maxCount, "\u5F20\u56FE\u7247\uFF01"));
       return Upload.LIST_IGNORE;
     }
@@ -806,8 +841,10 @@ var ApaasUpload = function ApaasUpload(_ref) {
       message.error("\u56FE\u7247\u4E0D\u80FD\u5927\u4E8E".concat(maxSize, "MB"));
       return Upload.LIST_IGNORE;
     }
+    var batchSeq = acquireBatchSeq();
+    pendingCountRef.current += 1;
     getBase64(file).then(function (res) {
-      return handleChange([].concat(_toConsumableArray(valueRef.current), [res]));
+      appendResult(batchSeq, res);
     });
     return Upload.LIST_IGNORE;
   };
@@ -909,6 +946,7 @@ var ApaasUpload = function ApaasUpload(_ref) {
     name: "file",
     listType: "picture-card",
     maxCount: maxCount,
+    multiple: true,
     className: styles.upload,
     beforeUpload: beforeUpload
   }, resetProps), value.length >= maxCount ? null : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
@@ -1049,6 +1087,16 @@ var ApaasUploadAsync = function ApaasUploadAsync(_ref, ref) {
     resetProps = _objectWithoutProperties(_ref, _excluded$6);
   var inputRef = useRef(null);
   var valueRef = useRef(value);
+  // 并发上传时用于正确控制 loading 状态（多个文件同时上传）
+  var uploadingCountRef = useRef(0);
+  // 已选中待上传的文件数，用于数量预占，避免并发上传超过 maxCount
+  var pendingCountRef = useRef(0);
+  // 文件序号，保证并发上传时文件名唯一
+  var seqRef = useRef(0);
+  // 当前批次的文件选择序号，用于按选择顺序展示上传结果
+  var batchSeqRef = useRef(0);
+  // 当前批次的上传结果，按序号存储，最后统一排序合并
+  var batchResultsRef = useRef(new Map());
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     uploading = _useState2[0],
@@ -1063,48 +1111,80 @@ var ApaasUploadAsync = function ApaasUploadAsync(_ref, ref) {
   useEffect(function () {
     valueRef.current = value;
   }, [value]);
+  var genFileName = function genFileName() {
+    seqRef.current += 1;
+    return "".concat(uniqueKey, "_").concat(seqRef.current, "_").concat(new Date().getTime(), ".jpg");
+  };
+  // 获取当前批次的文件选择序号；没有正在上传的文件时视为新一批，重置批次状态
+  var acquireBatchSeq = function acquireBatchSeq() {
+    if (pendingCountRef.current === 0) {
+      batchSeqRef.current = 0;
+      batchResultsRef.current.clear();
+    }
+    return batchSeqRef.current++;
+  };
   var asyncUpload = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-      var _valueRef$current;
-      var formData, fileName, _yield$request, success, data;
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, batchSeq) {
+      var formData, fileName, _yield$request, success, data, sorted;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            pendingCountRef.current += 1;
+            uploadingCountRef.current += 1;
             setUploading(true);
             formData = new FormData();
             formData.append('file', file);
-            fileName = "".concat(uniqueKey, "_").concat(((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.length) + 1, "_").concat(new Date().getTime(), ".jpg");
+            fileName = genFileName();
             formData.append('fileName', fileName);
-            _context.prev = 5;
-            _context.next = 8;
+            _context.prev = 7;
+            _context.next = 10;
             return request(actionUrl, {
               method: 'post',
               body: formData
             });
-          case 8:
+          case 10:
             _yield$request = _context.sent;
             success = _yield$request.success;
             data = _yield$request.data;
             if (success) {
-              handleChange([].concat(_toConsumableArray(valueRef.current), [data]));
+              if (valueRef.current.length + batchResultsRef.current.size < maxCount) {
+                // 先暂存到当前批次，等本批次全部完成后再按选择顺序合并
+                batchResultsRef.current.set(batchSeq, data);
+              }
             }
-            _context.next = 17;
+            _context.next = 19;
             break;
-          case 14:
-            _context.prev = 14;
-            _context.t0 = _context["catch"](5);
+          case 16:
+            _context.prev = 16;
+            _context.t0 = _context["catch"](7);
             message.error('图片上传失败');
-          case 17:
-            _context.prev = 17;
-            setUploading(false);
-            return _context.finish(17);
-          case 20:
+          case 19:
+            _context.prev = 19;
+            pendingCountRef.current = Math.max(0, pendingCountRef.current - 1);
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+            // 本批次全部上传完成，按选择序号排序后一次性合并到 value
+            if (pendingCountRef.current === 0 && batchResultsRef.current.size > 0) {
+              sorted = _toConsumableArray(batchResultsRef.current.entries()).sort(function (a, b) {
+                return a[0] - b[0];
+              }).map(function (_ref3) {
+                var _ref4 = _slicedToArray(_ref3, 2),
+                  v = _ref4[1];
+                return v;
+              });
+              handleChange([].concat(_toConsumableArray(valueRef.current), _toConsumableArray(sorted)));
+              batchResultsRef.current.clear();
+            }
+            if (uploadingCountRef.current === 0) {
+              setUploading(false);
+            }
+            return _context.finish(19);
+          case 25:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[5, 14, 17, 20]]);
+      }, _callee, null, [[7, 16, 19, 25]]);
     }));
-    return function asyncUpload(_x) {
+    return function asyncUpload(_x, _x2) {
       return _ref2.apply(this, arguments);
     };
   }();
@@ -1120,24 +1200,24 @@ var ApaasUploadAsync = function ApaasUploadAsync(_ref, ref) {
       return;
     }
     reader.onload = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
-        var _e$target, _valueRef$current2;
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
+        var _e$target;
         var result, fileName, file;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               result = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
-              fileName = "".concat(uniqueKey, "_").concat(((_valueRef$current2 = valueRef.current) === null || _valueRef$current2 === void 0 ? void 0 : _valueRef$current2.length) + 1, "_").concat(new Date().getTime(), ".jpg");
+              fileName = genFileName();
               file = dataURLtoFile(result, fileName);
-              asyncUpload(file);
+              asyncUpload(file, acquireBatchSeq());
             case 4:
             case "end":
               return _context2.stop();
           }
         }, _callee2);
       }));
-      return function (_x2) {
-        return _ref3.apply(this, arguments);
+      return function (_x3) {
+        return _ref5.apply(this, arguments);
       };
     }();
     reader.readAsDataURL(blob);
@@ -1171,7 +1251,8 @@ var ApaasUploadAsync = function ApaasUploadAsync(_ref, ref) {
   // 手动上传模式, 一直返回false
   var beforeUpload = function beforeUpload(file) {
     var size = file.size / 1024 / 1024 < maxSize;
-    if (value.length > maxCount) {
+    // 并发上传时用「已上传 + 待上传」一起判断，避免一次选多张时超出 maxCount
+    if (valueRef.current.length + pendingCountRef.current >= maxCount) {
       message.error("\u6700\u591A\u6DFB\u52A0".concat(maxCount, "\u5F20\u56FE\u7247\uFF01"));
       return Upload.LIST_IGNORE;
     }
@@ -1179,7 +1260,7 @@ var ApaasUploadAsync = function ApaasUploadAsync(_ref, ref) {
       message.error("\u56FE\u7247\u4E0D\u80FD\u5927\u4E8E".concat(maxSize, "MB"));
       return Upload.LIST_IGNORE;
     }
-    asyncUpload(file);
+    asyncUpload(file, acquireBatchSeq());
     return Upload.LIST_IGNORE;
   };
   var handleDelete = function handleDelete(key) {
@@ -1276,6 +1357,7 @@ var ApaasUploadAsync = function ApaasUploadAsync(_ref, ref) {
     name: "file",
     listType: "picture-card",
     maxCount: maxCount,
+    multiple: true,
     className: styles$1.upload,
     beforeUpload: beforeUpload
   }, resetProps), value.length >= maxCount ? null : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
@@ -1319,6 +1401,16 @@ var ApaasUploadProAsync = function ApaasUploadProAsync(_ref, ref) {
     resetProps = _objectWithoutProperties(_ref, _excluded$7);
   var inputRef = useRef(null);
   var valueRef = useRef(value);
+  // 并发上传时用于正确控制 loading 状态（多个文件同时上传）
+  var uploadingCountRef = useRef(0);
+  // 已选中待上传的文件数，用于数量预占，避免并发上传超过 maxCount
+  var pendingCountRef = useRef(0);
+  // 文件序号，保证并发上传时文件名唯一
+  var seqRef = useRef(0);
+  // 当前批次的文件选择序号，用于按选择顺序展示上传结果
+  var batchSeqRef = useRef(0);
+  // 当前批次的上传结果，按序号存储，最后统一排序合并
+  var batchResultsRef = useRef(new Map());
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     uploading = _useState2[0],
@@ -1333,61 +1425,84 @@ var ApaasUploadProAsync = function ApaasUploadProAsync(_ref, ref) {
   useEffect(function () {
     valueRef.current = value;
   }, [value]);
+  var genFileName = function genFileName() {
+    seqRef.current += 1;
+    return "".concat(uniqueKey, "_").concat(seqRef.current, "_").concat(new Date().getTime(), ".jpg");
+  };
+  // 获取当前批次的文件选择序号；没有正在上传的文件时视为新一批，重置批次状态
+  var acquireBatchSeq = function acquireBatchSeq() {
+    if (pendingCountRef.current === 0) {
+      batchSeqRef.current = 0;
+      batchResultsRef.current.clear();
+    }
+    return batchSeqRef.current++;
+  };
   var asyncUpload = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-      var _valueRef$current;
-      var formData, fileName, showName, _yield$request, success, data;
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, batchSeq) {
+      var formData, fileName, showName, _yield$request, success, data, sorted;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            pendingCountRef.current += 1;
+            uploadingCountRef.current += 1;
             setUploading(true);
             formData = new FormData();
             formData.append('file', file);
-            fileName = "".concat(uniqueKey, "_").concat(((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.length) + 1, "_").concat(new Date().getTime(), ".jpg");
+            fileName = genFileName();
             formData.append('fileName', fileName);
             showName = file.name.substring(0, file.name.lastIndexOf('.'));
-            _context.prev = 6;
-            _context.next = 9;
+            _context.prev = 8;
+            _context.next = 11;
             return request(actionUrl, {
               method: 'post',
               body: formData
             });
-          case 9:
+          case 11:
             _yield$request = _context.sent;
             success = _yield$request.success;
             data = _yield$request.data;
-            if (!success) {
-              _context.next = 16;
-              break;
-            }
-            if (!(valueRef.current.length >= maxCount)) {
-              _context.next = 15;
-              break;
+            if (success) {
+              if (valueRef.current.length + batchResultsRef.current.size < maxCount) {
+                // 先暂存到当前批次，等本批次全部完成后再按选择顺序合并
+                batchResultsRef.current.set(batchSeq, {
+                  url: data,
+                  name: showName
+                });
+              }
             }
-            return _context.abrupt("return");
-          case 15:
-            handleChange([].concat(_toConsumableArray(valueRef.current), [{
-              url: data,
-              name: showName
-            }]));
-          case 16:
-            _context.next = 21;
+            _context.next = 20;
             break;
-          case 18:
-            _context.prev = 18;
-            _context.t0 = _context["catch"](6);
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](8);
             message.error('图片上传失败');
-          case 21:
-            _context.prev = 21;
-            setUploading(false);
-            return _context.finish(21);
-          case 24:
+          case 20:
+            _context.prev = 20;
+            pendingCountRef.current = Math.max(0, pendingCountRef.current - 1);
+            uploadingCountRef.current = Math.max(0, uploadingCountRef.current - 1);
+            // 本批次全部上传完成，按选择序号排序后一次性合并到 value
+            if (pendingCountRef.current === 0 && batchResultsRef.current.size > 0) {
+              sorted = _toConsumableArray(batchResultsRef.current.entries()).sort(function (a, b) {
+                return a[0] - b[0];
+              }).map(function (_ref3) {
+                var _ref4 = _slicedToArray(_ref3, 2),
+                  v = _ref4[1];
+                return v;
+              });
+              handleChange([].concat(_toConsumableArray(valueRef.current), _toConsumableArray(sorted)));
+              batchResultsRef.current.clear();
+            }
+            if (uploadingCountRef.current === 0) {
+              setUploading(false);
+            }
+            return _context.finish(20);
+          case 26:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[6, 18, 21, 24]]);
+      }, _callee, null, [[8, 17, 20, 26]]);
     }));
-    return function asyncUpload(_x) {
+    return function asyncUpload(_x, _x2) {
       return _ref2.apply(this, arguments);
     };
   }();
@@ -1403,24 +1518,24 @@ var ApaasUploadProAsync = function ApaasUploadProAsync(_ref, ref) {
       return;
     }
     reader.onload = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
-        var _e$target, _valueRef$current2;
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
+        var _e$target;
         var result, fileName, file;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               result = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
-              fileName = "".concat(uniqueKey, "_").concat(((_valueRef$current2 = valueRef.current) === null || _valueRef$current2 === void 0 ? void 0 : _valueRef$current2.length) + 1, "_").concat(new Date().getTime(), ".jpg");
+              fileName = genFileName();
               file = dataURLtoFile(result, fileName);
-              asyncUpload(file);
+              asyncUpload(file, acquireBatchSeq());
             case 4:
             case "end":
               return _context2.stop();
           }
         }, _callee2);
       }));
-      return function (_x2) {
-        return _ref3.apply(this, arguments);
+      return function (_x3) {
+        return _ref5.apply(this, arguments);
       };
     }();
     reader.readAsDataURL(blob);
@@ -1454,7 +1569,8 @@ var ApaasUploadProAsync = function ApaasUploadProAsync(_ref, ref) {
   // 手动上传模式, 一直返回false
   var beforeUpload = function beforeUpload(file) {
     var size = file.size / 1024 / 1024 < maxSize;
-    if (value.length > maxCount) {
+    // 并发上传时用「已上传 + 待上传」一起判断，避免一次选多张时超出 maxCount
+    if (valueRef.current.length + pendingCountRef.current >= maxCount) {
       message.error("\u6700\u591A\u6DFB\u52A0".concat(maxCount, "\u5F20\u56FE\u7247\uFF01"));
       return Upload.LIST_IGNORE;
     }
@@ -1462,7 +1578,7 @@ var ApaasUploadProAsync = function ApaasUploadProAsync(_ref, ref) {
       message.error("\u56FE\u7247\u4E0D\u80FD\u5927\u4E8E".concat(maxSize, "MB"));
       return Upload.LIST_IGNORE;
     }
-    asyncUpload(file);
+    asyncUpload(file, acquireBatchSeq());
     return Upload.LIST_IGNORE;
   };
   var handleDelete = function handleDelete(key) {
@@ -1596,6 +1712,7 @@ var ApaasUploadProAsync = function ApaasUploadProAsync(_ref, ref) {
     name: "file",
     listType: "picture-card",
     maxCount: maxCount,
+    multiple: true,
     className: styles$2.uploadPro,
     beforeUpload: beforeUpload
   }, resetProps), value.length >= maxCount ? null : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kmkf-fe-packages/basic-components",
-  "version": "2.10.9-beta.12",
+  "version": "2.10.9-beta.13",
   "description": "> TODO: description",
   "homepage": "",
   "license": "ISC",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a0d12c8caf0912d82e12ed94e64afd3ff746c65"
+  "gitHead": "e3f8d7e54fb659a27f9a5b4dce555178609caf1d"
 }