fan-standard-comp 3.2.2 → 3.2.4

package/es/FormComp/FieldComponent/index.js

@@ -28,7 +28,7 @@ import React, { useContext } from "react";
 import Uploader from '../Uploader';
 import SpecIcon from '../../SpecIcon';
 import RefactorTreeSelect from './RefactorTreeSelect.js';
-import { setSelectValue, setUploaderValue, setDatePickerValue, setTimePickerValue, setCascaderValue } from './setReadonlyValues.js';
+import { setSelectValue, setDatePickerValue, setTimePickerValue, setCascaderValue } from './setReadonlyValues.js';
 import TitleNode from './TitleNode';
 import ReUpload from './ReUpload';
 import { FanContext } from '../../ConfigContext';
@@ -327,10 +327,11 @@ var FieldComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }), " \u70B9\u51FB\u4E0A\u4F20")));
       break;
     case 'uploader':
-      compContent = viewOnly ? setUploaderValue(value) : /*#__PURE__*/React.createElement(Uploader, Object.assign({}, defaultProps, {
+      // compContent = viewOnly ? setUploaderValue(value) : <Uploader {...defaultProps} size={protoConfig?.size}/>
+      compContent = /*#__PURE__*/React.createElement(Uploader, Object.assign({}, defaultProps, {
+        viewOnly: viewOnly,
         size: protoConfig === null || protoConfig === void 0 ? void 0 : protoConfig.size
       }));
-      // compContent = <Uploader {...defaultProps}></Uploader>
       break;
     case 'cascader':
       compContent = viewOnly ? setCascaderValue(value, {

package/es/FormComp/Uploader/index.d.ts

@@ -8,7 +8,10 @@ interface UploaderProps {
     className?: string;
     isOnly?: boolean;
     children?: React.ReactNode;
-    onChange?: (file?: any) => void;
+    onChange?: (file?: any, defaultFile?: {
+        file: any;
+        fileList: any[];
+    }) => void;
     value?: any;
     size?: number;
     modalSize?: string;
@@ -17,6 +20,8 @@ interface UploaderProps {
     limit?: number;
     modalConfig?: any;
     modalZIndex?: number;
+    crop?: boolean;
+    cropConfig?: any;
     [k: string]: any;
 }
 declare const Uploader: React.ForwardRefExoticComponent<Omit<UploaderProps, "ref"> & React.RefAttributes<unknown>>;

package/es/FormComp/Uploader/index.js

@@ -1,8 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import "antd/es/upload/style";
-import _Upload from "antd/es/upload";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
+import "antd/es/upload/style";
+import _Upload from "antd/es/upload";
 import "antd/es/message/style";
 import _message from "antd/es/message";
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
@@ -16,7 +16,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { __awaiter } from "tslib";
+import { __awaiter, __rest } from "tslib";
 /* eslint-disable */
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
@@ -24,6 +24,7 @@ import { getAccept, getBase64 } from "./util";
 // import StandardModal from "../../StandardModal";
 import './style/index.less';
 import ImagePreview from '../../ImageGallery/ImagePreview';
+import ImgCrop from 'antd-img-crop';
 var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var accept = props.accept,
     extraExt = props.extraExt,
@@ -37,7 +38,12 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     size = _props$size === void 0 ? 2 * 1024 * 1024 : _props$size,
     onPreview = props.onPreview,
     beforeUpload = props.beforeUpload,
-    limit = props.limit;
+    limit = props.limit,
+    maxCount = props.maxCount,
+    viewOnly = props.viewOnly,
+    crop = props.crop,
+    cropConfig = props.cropConfig,
+    otherProps = __rest(props, ["accept", "extraExt", "fileType", "className", "isOnly", "children", "onChange", "value", "size", "onPreview", "beforeUpload", "limit", "maxCount", "viewOnly", "crop", "cropConfig"]);
   // 图片预览数据
   // const [showConfig, setShowConfig] = useState({ visible: false, url: '' })
   // 用于展示的缩略图
@@ -54,6 +60,26 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     previewCurrent = _useState6[0],
     setPreviewerCurrent = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    cropFile = _useState8[0],
+    setCropFile = _useState8[1]; // 存储裁剪的图片file信息
+  var maxCountLimit = useMemo(function () {
+    if (isOnly) {
+      return 1;
+    }
+    return maxCount || limit;
+  }, [isOnly, limit, maxCount]);
+  var splitAccept = useMemo(function () {
+    var res = getAccept(fileType);
+    if (extraExt) {
+      res = res + ',' + extraExt;
+    }
+    if (accept) {
+      res = res + ',' + accept;
+    }
+    return res;
+  }, [fileType, extraExt]);
   useEffect(function () {
     if (!value) {
       setUploaderFileList([]);
@@ -68,7 +94,7 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
         file.uid = file.uid || "".concat(S4(), "-").concat(S4());
         file.url = file.downloadUrl || file.url;
         file.status = 'done';
-        file.previewUrl = file.downloadUrl || file.url; // 给预览地址
+        file.previewUrl = file.previewUrl || file.downloadUrl || file.url; // 给预览地址
         return file;
       }));
       return;
@@ -79,7 +105,7 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
         uid: "".concat(S4(), "-").concat(S4()),
         url: value.downloadUrl || value.url,
         status: 'done',
-        previewUrl: value.downloadUrl || value.url
+        previewUrl: value.previewUrl || value.downloadUrl || value.url
       }, value)]);
       /* eslint-enable no-multi-spaces */
       return;
@@ -95,16 +121,6 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
   }, [value]);
-  var splitAccept = useMemo(function () {
-    var res = getAccept(fileType);
-    if (extraExt) {
-      res = res + ',' + extraExt;
-    }
-    if (accept) {
-      res = res + ',' + accept;
-    }
-    return res;
-  }, [fileType, extraExt]);
   // 点击文件链接或预览图标时的回调
   var handlePreview = useCallback(function (file, files) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -112,10 +128,10 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
-            return fileListPreviewer(_toConsumableArray(files));
-          case 2:
-            pList = _context.sent;
+            // 方式一：直接全部转换成base64后再打开预览（问题：会出现时间过长）
+            // const pList: any = await fileListPreviewer([...files])
+            // 方式三：上传时已经转换过
+            pList = _toConsumableArray(files);
             setUploaderFileList(pList);
             setPreviewerCurrent(pList.findIndex(function (item) {
               return item.uid === file.uid;
@@ -149,7 +165,7 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
             // console.log('file', file.uid)
             // const previewItem = pList.find((item: FileTypeProps) => item.uid === file.uid)
             // setShowConfig({ visible: true, url: previewItem.previewUrl })
-          case 6:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -157,17 +173,17 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }));
   }, []);
   // 检查文件是否规范
-  var handleCheck = useCallback(function (file) {
-    var isLtSize = file.size < size;
-    if (!isLtSize) {
-      _message.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(Math.round(size / 1024 / 1024 * 100) / 100, "MB!"));
-      return false;
-    }
-    return true;
-  }, [fileType, size]);
+  // const handleCheck = useCallback((file: any) => {
+  //   const isLtSize = file.size < size;
+  //   if (!isLtSize) {
+  //     message.error(`文件大小不能超过${Math.round(((size / 1024) / 1024) * 100) / 100}MB!`);
+  //     return false;
+  //   }
+  //   return true;
+  // }, [fileType, size])
   var handleChange = useCallback(function (res) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var isOk, result, list;
+      var result, fileRes, matchAddIndex, matchAdd;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -176,99 +192,123 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
               break;
             }
             setUploaderFileList(res.fileList);
-            onChange && onChange(isOnly ? res.fileList[0] && res.fileList[0].originFileObj : res.fileList);
+            // onChange && onChange(isOnly ? res.fileList[0] && res.fileList[0].originFileObj : res.fileList)
+            onChange && onChange(res.fileList, res);
             return _context2.abrupt("return");
           case 4:
-            isOk = handleCheck(res.file);
-            if (isOk) {
-              list = res.fileList.map(function (file) {
-                if (!file.previewUrl) {
-                  console.log('无预览URL', file);
-                }
-                // if (!file.url) {
-                //   file.url = file.thumbUrl
-                // }
-                return file;
-              }); // const previewUrls = ( res.fileList || []).map((item: any) => {
-              //   return getPreviewInfo(item)
-              // });
-              // let resultList = await Promise.all(previewUrls).catch((err) => {
-              //   console.log('Promise.all==>转换base64失败', err)
-              // })
-              result = _toConsumableArray(list || []);
-              setUploaderFileList(result);
-              onChange && onChange(isOnly ? result[0] && result[0].originFileObj : result);
+            result = []; // 裁剪模式下，把裁剪后的文件信息传过来
+            if (crop && cropFile) {
+              res.file = cropFile;
             }
-          case 6:
+            _context2.next = 8;
+            return getBase64(res.file);
+          case 8:
+            fileRes = _context2.sent;
+            matchAddIndex = res.fileList.findIndex(function (item) {
+              return item.uid === res.file.uid;
+            });
+            matchAdd = res.fileList[matchAddIndex];
+            matchAdd.previewUrl = fileRes === null || fileRes === void 0 ? void 0 : fileRes.url; // 预览URL
+            if (crop && cropFile) {
+              // 将当前裁剪后的文件传出来
+              matchAdd.originFileObj = res.file;
+              matchAdd.size = res.file.size;
+              matchAdd.lastModified = res.file.lastModified;
+              matchAdd.lastModifiedDate = res.file.lastModifiedDate;
+            }
+            res.fileList.splice(matchAddIndex, 1, matchAdd);
+            result = _toConsumableArray(res.fileList || []);
+            setUploaderFileList(result);
+            setCropFile(null);
+            onChange && onChange(isOnly ? result[0] && result[0].originFileObj : result, res);
+            // const isOk = handleCheck(res.file)
+            // if (isOk) {
+            //   let result: any = []
+            //   const fileRes = await getBase64(res.file)
+            //   const matchAddIndex = res.fileList.findIndex((item: any) => item.uid === res.file.uid)
+            //   const matchAdd = res.fileList[matchAddIndex]
+            //   console.log('matchAdd', matchAdd, maxCountLimit)
+            //   matchAdd.previewUrl = fileRes?.url
+            //   res.fileList.splice(matchAddIndex, 1, matchAdd)
+            //   result = [...(res.fileList || [])]
+            //   setUploaderFileList(result)
+            //   onChange && onChange(isOnly ? result[0] && result[0].originFileObj : result, res)
+            // }
+          case 18:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
     }));
-  }, [isOnly, handleCheck, uploaderFileList]);
-  var getPreviewInfo = function getPreviewInfo(file) {
-    return new Promise(function (resolve, reject) {
-      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var res;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              if (!(!file.url && !file.previewUrl)) {
-                _context3.next = 8;
-                break;
-              }
-              _context3.next = 3;
-              return getBase64(file.originFileObj);
-            case 3:
-              res = _context3.sent;
-              if (res && res.status === 'success') {
-                file.previewUrl = res.url;
-              }
-              // console.log('转换成功', file)
-              resolve(Object.assign({}, file));
-              _context3.next = 10;
-              break;
-            case 8:
-              if (!file.previewUrl) {
-                file.previewUrl = file.url;
-              }
-              // 已经转换过,无需再转换
-              // console.log('已经转换过,无需再转换', file)
-              resolve(Object.assign({}, file));
-            case 10:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-    });
+  }, [isOnly, uploaderFileList, maxCountLimit, crop, cropFile]);
+  //
+  // const getPreviewInfo = (file: any) => {
+  //   return new Promise(async (resolve, reject) => {
+  //     if (!file.url && !file.previewUrl) {
+  //       const res = await getBase64(file.originFileObj);
+  //       if (res && res.status === 'success') {
+  //         file.previewUrl = res.url;
+  //       }
+  //       // console.log('转换成功', file)
+  //       resolve({ ...file })
+  //     } else {
+  //       if (!file.previewUrl) {
+  //         file.previewUrl = file.url
+  //       }
+  //       // 已经转换过,无需再转换
+  //       // console.log('已经转换过,无需再转换', file)
+  //       resolve({ ...file })
+  //     }
+  //   })
+  // }
+  // const fileListPreviewer = async (files?: any) => {
+  //   const previewUrls = (files || []).map((item: any) => {
+  //     return getPreviewInfo(item)
+  //   });
+  //   let resultList = await Promise.all(previewUrls).catch((err) => {
+  //     console.log('Promise.all==>转换base64失败', err)
+  //   });
+  //   return resultList
+  // }
+  var handleClose = function handleClose() {
+    setShowPreview(false);
   };
-  var fileListPreviewer = function fileListPreviewer(files) {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      var previewUrls, resultList;
-      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+  var handleBeforeUpload = useCallback(function (file) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var isLtSize;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            previewUrls = (files || []).map(function (item) {
-              return getPreviewInfo(item);
-            });
-            _context4.next = 3;
-            return Promise.all(previewUrls).catch(function (err) {
-              console.log('Promise.all==>转换base64失败', err);
-            });
-          case 3:
-            resultList = _context4.sent;
-            return _context4.abrupt("return", resultList);
-          case 5:
+            //限制图片 格式、size、分辨率
+            // const isJPG = file.type === 'image/jpeg';
+            // const isJPEG = file.type === 'image/jpeg';
+            // const isGIF = file.type === 'image/gif';
+            // const isPNG = file.type === 'image/png';
+            // if (!(isJPG || isJPEG || isGIF || isPNG)) {
+            //   message.error("上传图片的格式不正确，不是JPG、JPEG、GIF、PNG");
+            //   return false;
+            // }
+            isLtSize = file.size < size;
+            if (isLtSize) {
+              _context3.next = 4;
+              break;
+            }
+            _message.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(Math.round(size / 1024 / 1024 * 100) / 100, "MB!"));
+            // 如果直接返回false或者true,还是会触发额外的onChange，所以需要改成 Upload.LIST_IGNORE
+            return _context3.abrupt("return", _Upload.LIST_IGNORE);
+          case 4:
+            // 存储裁剪后的文件信息（只有fileType=image，且在单选情况下才可以）
+            if (crop && fileType === 'image') {
+              setCropFile(file);
+            }
+            return _context3.abrupt("return", false);
+          case 6:
           case "end":
-            return _context4.stop();
+            return _context3.stop();
         }
-      }, _callee4);
+      }, _callee3);
     }));
-  };
-  var handleClose = function handleClose() {
-    setShowPreview(false);
-  };
+  }, [fileType, size, crop]);
   // 渲染预览窗口
   /* const renderPreviewComponent = useMemo(
      () => {
@@ -291,7 +331,7 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
    )*/
   var renderChildrenComponent = useMemo(function () {
     var renderButton = function renderButton() {
-      if (fileType === 'image' || fileType === 'svg') {
+      if (fileType === 'image' || fileType === 'svg' || fileType === 'video') {
         return /*#__PURE__*/React.createElement("div", {
           className: 'spec-uploader-control'
         }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
@@ -302,28 +342,33 @@ var Uploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: 'spec-uploader-button'
       }, /*#__PURE__*/React.createElement(PlusOutlined, null), "\u70B9\u51FB\u9009\u62E9");
     };
-    if (isOnly && uploaderFileList.length === 1 || limit && uploaderFileList.length === limit) {
+    if (maxCountLimit && uploaderFileList.length === maxCountLimit) {
       return null;
     }
     if (children) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, " ", children, " ");
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, renderButton());
-  }, [fileType, isOnly, children, uploaderFileList, limit]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Upload, Object.assign({}, props, {
-    ref: ref,
-    accept: splitAccept,
-    fileList: uploaderFileList,
-    listType: fileType === 'image' || fileType === 'svg' ? 'picture-card' : 'text',
-    className: "spec-uploader ".concat(className),
-    onPreview: onPreview ? onPreview : fileType === 'image' || fileType === 'svg' ? function (file) {
-      return handlePreview(file, uploaderFileList);
-    } : function () {},
-    beforeUpload: beforeUpload ? beforeUpload : function () {
-      return false;
-    },
-    onChange: handleChange
-  }), renderChildrenComponent), (fileType === 'image' || fileType === 'svg') && showPreview && /*#__PURE__*/React.createElement(ImagePreview, {
+  }, [fileType, children, uploaderFileList, maxCountLimit]);
+  var RenderUpload = function RenderUpload() {
+    return /*#__PURE__*/React.createElement(_Upload, Object.assign({}, otherProps, {
+      disabled: otherProps.disabled || viewOnly,
+      maxCount: maxCountLimit,
+      ref: ref,
+      accept: splitAccept,
+      fileList: uploaderFileList,
+      listType: fileType === 'image' || fileType === 'svg' ? 'picture-card' : 'text',
+      className: "spec-uploader ".concat(className),
+      onPreview: onPreview ? onPreview : fileType === 'image' || fileType === 'svg' ? function (file) {
+        return handlePreview(file, uploaderFileList);
+      } : function () {},
+      beforeUpload: beforeUpload ? beforeUpload : handleBeforeUpload,
+      onChange: handleChange
+    }), viewOnly ? null : renderChildrenComponent);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null,
+  // multiple 情况下不可用
+  !(otherProps === null || otherProps === void 0 ? void 0 : otherProps.multiple) && fileType === 'image' && crop ? /*#__PURE__*/React.createElement(ImgCrop, Object.assign({}, cropConfig || {}), RenderUpload()) : RenderUpload(), (fileType === 'image' || fileType === 'svg') && showPreview && /*#__PURE__*/React.createElement(ImagePreview, {
     hasThumbnail: true,
     open: showPreview,
     onClose: handleClose,

package/es/ImageGallery/PreviewStyles/ImagePreview.less

@@ -28,12 +28,14 @@
 
 .spec-image-preview-next,
 .spec-image-preview-prev {
-  background-color: rgba(0, 0, 0, 0.45);
+  background-color: rgba(255, 255, 255, 0.25);
   border-radius: 2px;
   color: #999;
+  //color: #333;
   cursor: pointer;
   display: block;
-  font-size: 22px;
+  //font-size: 22px;
+  font-size: 30px;
   margin-top: -10px;
   padding: 8px 10px 9px;
   position: absolute;
@@ -51,6 +53,7 @@
 
 .spec-image-preview-next:hover:not(.disabled),
 .spec-image-preview-prev:hover:not(.disabled) {
+  background-color: rgba(255, 255, 255, 0.45);
   color: #fff;
 }
 

package/lib/FormComp/FieldComponent/index.js

@@ -337,10 +337,11 @@ var FieldComponent = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       }), " \u70B9\u51FB\u4E0A\u4F20")));
       break;
     case 'uploader':
-      compContent = viewOnly ? (0, _setReadonlyValues.setUploaderValue)(value) : /*#__PURE__*/_react.default.createElement(_Uploader.default, Object.assign({}, defaultProps, {
+      // compContent = viewOnly ? setUploaderValue(value) : <Uploader {...defaultProps} size={protoConfig?.size}/>
+      compContent = /*#__PURE__*/_react.default.createElement(_Uploader.default, Object.assign({}, defaultProps, {
+        viewOnly: viewOnly,
         size: protoConfig === null || protoConfig === void 0 ? void 0 : protoConfig.size
       }));
-      // compContent = <Uploader {...defaultProps}></Uploader>
       break;
     case 'cascader':
       compContent = viewOnly ? (0, _setReadonlyValues.setCascaderValue)(value, {

package/lib/FormComp/Uploader/index.d.ts

@@ -8,7 +8,10 @@ interface UploaderProps {
     className?: string;
     isOnly?: boolean;
     children?: React.ReactNode;
-    onChange?: (file?: any) => void;
+    onChange?: (file?: any, defaultFile?: {
+        file: any;
+        fileList: any[];
+    }) => void;
     value?: any;
     size?: number;
     modalSize?: string;
@@ -17,6 +20,8 @@ interface UploaderProps {
     limit?: number;
     modalConfig?: any;
     modalZIndex?: number;
+    crop?: boolean;
+    cropConfig?: any;
     [k: string]: any;
 }
 declare const Uploader: React.ForwardRefExoticComponent<Omit<UploaderProps, "ref"> & React.RefAttributes<unknown>>;