@ecoding/components.antd 0.3.59 → 0.3.60

package/lib/core/multiple-img-upload/index.d.ts

@@ -1,16 +1,21 @@
 import React from 'react';
 import type { UploadFile } from 'antd';
+interface IOpts {
+    size?: number;
+    w?: number;
+    h?: number;
+}
 interface IProps {
     message?: string;
     showMessage?: boolean;
     actionParams?: any;
     i18n?: any;
+    opts?: IOpts;
     value?: UploadFile[] | string[];
     headers?: any;
     data?: any;
     gif?: boolean;
     disabled?: boolean;
-    isTip?: boolean;
     name?: string;
     action: string | (() => string);
     buttonText?: string;

package/lib/core/multiple-img-upload/index.js

@@ -7,9 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useState } from 'react';
-import { Upload, Image } from 'antd';
+import React, { useState, useCallback, useMemo } from 'react';
+import { Upload, Image as Img, Alert, Flex, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
+import { buildURL } from "@ecoding/helper.url";
 import Toast from "../../core/toast";
 import Loading from "../../core/loading";
 import { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
@@ -34,7 +35,9 @@ const DraggableUploadListItem = ({ originNode, file }) => {
  * @returns 返回地址的string
  */
 const MultipleImgUpload = (props) => {
-    const { action, name, buttonText, maxCount, disabled, value, onChange } = props;
+    const { name, buttonText, maxCount, disabled, value, onChange } = props;
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewImage, setPreviewImage] = useState('');
     const [imgList, setImgList] = useState((value === null || value === void 0 ? void 0 : value.map((url, index) => {
         if (typeof url === "string") {
             return {
@@ -83,7 +86,6 @@ const MultipleImgUpload = (props) => {
             }
             case 'error': {
                 const response = info.file.response;
-                console.log(response.data);
                 Toast.error({
                     mask: true,
                     title: response.message || '服务出错，图片上传失败'
@@ -99,8 +101,12 @@ const MultipleImgUpload = (props) => {
         const lefts = imgList.filter(item => item.uid !== file.uid);
         updateItems(lefts);
     };
-    const [previewOpen, setPreviewOpen] = useState(false);
-    const [previewImage, setPreviewImage] = useState('');
+    const action = useMemo(() => {
+        if (typeof props.action === "string") {
+            return buildURL(props.action, props.actionParams);
+        }
+        return buildURL(props.action(), props.actionParams);
+    }, [props.actionParams, props.action]);
     const getBase64 = (file) => new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
@@ -133,22 +139,93 @@ const MultipleImgUpload = (props) => {
             updateItems(newItems);
         }
     };
-    return (React.createElement(DndContext, { sensors: [sensor], onDragEnd: onDragEnd },
-        React.createElement(SortableContext, { items: imgList === null || imgList === void 0 ? void 0 : imgList.map((i) => i.uid), strategy: horizontalListSortingStrategy },
-            React.createElement(Upload, { listType: "picture-card", fileList: imgList, action: action, onPreview: handlePreview, onChange: handleChange, onRemove: handleRemove, name: name, multiple: true, disabled: disabled, withCredentials: true, itemRender: (originNode, file) => (React.createElement(DraggableUploadListItem, { originNode: originNode, file: file })) }, maxCount && imgList.length >= maxCount ? null : uploadButton),
-            previewImage && (React.createElement(Image, { wrapperStyle: { display: 'none' }, preview: {
-                    visible: previewOpen,
-                    onVisibleChange: (visible) => setPreviewOpen(visible),
-                    afterOpenChange: (visible) => !visible && setPreviewImage('')
-                }, src: previewImage })))));
+    const getImgwh = useCallback((base64) => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                // 宽度固定
+                resolve({
+                    w: img.width,
+                    h: img.height
+                });
+            };
+            img.onerror = () => reject();
+            img.src = base64;
+        });
+    }, []);
+    const beforeUpload = useCallback((file) => {
+        return new Promise((resolve, reject) => __awaiter(void 0, void 0, void 0, function* () {
+            const ary = ["jpg", "jpeg", "png"];
+            if (props.gif) {
+                ary.push("gif");
+            }
+            if (ary.indexOf(file.type.toLowerCase().replace(/image\//g, "")) === -1) {
+                message.error(`请上传 ${ary.join(",")} 格式的图片!`);
+                reject();
+                return;
+            }
+            const isLt2M = file.size / 1024 / 1024 < (props.opts.size || 1);
+            if (!isLt2M) {
+                message.error(`图片大小必须小于${props.opts.size} MB!`);
+                reject();
+                return;
+            }
+            const base64 = yield getBase64(file);
+            const wh = yield getImgwh(base64);
+            if (props.opts.w && props.opts.w !== wh.w) {
+                message.error(`图片宽度不符合 ${props.opts.w}px 约定!`);
+                reject();
+                return;
+            }
+            if (props.opts.h && props.opts.h !== wh.h) {
+                message.error(`图片高度不符合 ${props.opts.h}px 约定!`);
+                reject();
+                return;
+            }
+            resolve();
+        }));
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        props.showMessage && (React.createElement(Alert, { className: 'mb20', message: props.message ? props.message : (React.createElement(Flex, { gap: 10 },
+                React.createElement("div", null,
+                    props.i18n ? props.i18n.$t("global.size", "大小") : "大小",
+                    "\uFF1A",
+                    props.i18n ? props.i18n.$t("global.lt", "小于") : "小于",
+                    " ",
+                    props.opts.size || 1,
+                    "MB;"),
+                React.createElement("div", null,
+                    props.i18n ? props.i18n.$t("global.dimension", "尺寸") : "尺寸",
+                    "\uFF1A",
+                    props.opts.w ? `${props.opts.w}px` : "n",
+                    " * ",
+                    props.opts.h ? `${props.opts.h}px` : "n",
+                    ";"),
+                React.createElement("div", null,
+                    props.i18n ? props.i18n.$t("global.support", "支持") : "支持",
+                    "\uFF1Ajpg\u3001jpeg\u3001png",
+                    props.gif ? "、gif" : "",
+                    ";"))), type: "warning", showIcon: true })),
+        React.createElement(DndContext, { sensors: [sensor], onDragEnd: onDragEnd },
+            React.createElement(SortableContext, { items: imgList === null || imgList === void 0 ? void 0 : imgList.map((i) => i.uid), strategy: horizontalListSortingStrategy },
+                React.createElement(Upload, { listType: "picture-card", fileList: imgList, action: action, beforeUpload: beforeUpload, onPreview: handlePreview, onChange: handleChange, onRemove: handleRemove, name: name, data: props.data, multiple: true, disabled: disabled, withCredentials: true, itemRender: (originNode, file) => (React.createElement(DraggableUploadListItem, { originNode: originNode, file: file })) }, maxCount && imgList.length >= maxCount ? null : uploadButton),
+                previewImage && (React.createElement(Img, { wrapperStyle: { display: 'none' }, preview: {
+                        visible: previewOpen,
+                        onVisibleChange: (visible) => setPreviewOpen(visible),
+                        afterOpenChange: (visible) => !visible && setPreviewImage('')
+                    }, src: previewImage }))))));
 };
 MultipleImgUpload.defaultProps = {
+    maxCount: 6,
+    showMessage: true,
     action: "/api/upload/img",
     name: "file",
     gif: false,
     buttonText: '上传图片',
     data: {},
-    isTip: true,
     actionParams: {},
+    opts: {
+        size: 1
+    }
 };
 export default MultipleImgUpload;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.59",
+    "version": "0.3.60",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -47,5 +47,5 @@
         "antd": "5.27.0",
         "axios": "^1.1.2"
     },
-    "gitHead": "7c271775a18b32dedae8fea1707efcdadef6592f"
+    "gitHead": "ba3818c41417032a2fb1c71f400cf283940dd54f"
 }