@cloudbase/weda-ui 3.9.8 → 3.10.1

package/dist/web/components/form/selectMultiple/h5.js

@@ -3,7 +3,7 @@ import { defaultProps } from './index';
 import { emptyObject } from '../../../utils/constant';
 import { PureSelectH5 } from './dropdown-select/ui';
 import { useSyncValue } from '../../../utils/hooks/useSyncValue';
-export default function SelectH5({ events = emptyObject, name, placeholder, disabled = false, range = defaultProps.range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, staticSearchable, where, }) {
+export default function SelectH5({ events = emptyObject, name, placeholder, disabled = false, range = defaultProps.range, primaryField, dataSourceName, format, onChange, onSearchValueInput, defaultValue, readOnly, ignoreCase, staticSearchable, where, childRef, addRelationButtonText, enableAddRelationButton, }) {
     const [selectedValue, setSelectedValue] = useSyncValue(defaultValue);
     let params = { controlledValue: range };
     if (format === 'many-many' || format === 'one-many') {
@@ -15,10 +15,13 @@ export default function SelectH5({ events = emptyObject, name, placeholder, disa
             controlledValue: range,
         };
     }
-    return (_jsx(PureSelectH5, { staticSearchable: staticSearchable, ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value) => {
+    return (_jsx(PureSelectH5, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, staticSearchable: staticSearchable, ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value) => {
             var _a;
             setSelectedValue(value);
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
             (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
-        }, onSearchValueInput: onSearchValueInput }));
+        }, onSearchValueInput: onSearchValueInput, onAddRelationButtonClick: () => {
+            var _a;
+            (_a = events === null || events === void 0 ? void 0 : events.onAddRelationButtonClick) === null || _a === void 0 ? void 0 : _a.call(events);
+        } }));
 }

package/dist/web/components/form/selectMultiple/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { CommonFormPropsType } from '../types';
 import { IUseoptionsParams } from './request';
+import { AttachContainer } from 'tea-component/lib/_util/get-overlay-root';
 import './style';
 export default function SelectMultiple(props: any): JSX.Element;
 export interface PropsType extends CommonFormPropsType {
@@ -41,6 +42,10 @@ export interface PropsType extends CommonFormPropsType {
     readOnly?: boolean;
     ignoreCase?: boolean;
     staticSearchable?: boolean;
+    childRef?: any;
+    addRelationButtonText?: string;
+    enableAddRelationButton?: boolean;
+    popupContainer?: AttachContainer;
 }
 export declare const defaultProps: {
     events: {};

package/dist/web/components/form/selectMultiple/index.js

@@ -54,7 +54,7 @@ export const defaultProps = {
     requiredFlag: false,
     range: [],
 };
-function SelectPc({ dataSourceName, format, primaryField, defaultValue, placeholder = '请选择', events = emptyObject, disabled = false, range = defaultProps.range, size = defaultProps.size, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, where, }) {
+function SelectPc({ dataSourceName, format, primaryField, defaultValue, placeholder = '请选择', events = emptyObject, disabled = false, range = defaultProps.range, size = defaultProps.size, onChange, onSearchValueInput, readOnly, ignoreCase, staticSearchable, where, childRef, addRelationButtonText, enableAddRelationButton, popupContainer, }) {
     const [selectedValue, setSelectedValue] = useSyncValue(defaultValue);
     let params = { controlledValue: range };
     if (format === 'many-many' || format === 'one-many') {
@@ -67,13 +67,16 @@ function SelectPc({ dataSourceName, format, primaryField, defaultValue, placehol
         };
     }
     const createDropdown = () => {
-        return (_jsx(PureSelectPc, { ignoreCase: ignoreCase, staticSearchable: staticSearchable, params: params, disabled: disabled, readOnly: readOnly, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent) => {
+        return (_jsx(PureSelectPc, { childRef: childRef, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, ignoreCase: ignoreCase, staticSearchable: staticSearchable, params: params, disabled: disabled, readOnly: readOnly, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent) => {
                 var _a;
                 onChange && onChange(value);
                 setSelectedValue(value);
                 triggerEvent && ((_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value }));
-            }, onSearchValueInput: onSearchValueInput }));
+            }, onSearchValueInput: onSearchValueInput, onAddRelationButtonClick: () => {
+                var _a;
+                (_a = events === null || events === void 0 ? void 0 : events.onAddRelationButtonClick) === null || _a === void 0 ? void 0 : _a.call(events);
+            } }));
     };
     const dropdown = createDropdown();
-    return _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: dropdown });
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", popupContainer: popupContainer, children: dropdown }));
 }

package/dist/web/components/form/selectMultiple/request.js

@@ -58,7 +58,8 @@ export const requestFatherRelatedOption = async (params, pageNo, type, searchVal
         }
     }
     const defaultData = results === null || results === void 0 ? void 0 : results.map((opt) => ({
-        option: [{ label: opt._id, value: opt._id }],
+        label: opt._id,
+        value: opt._id,
     })); // 兜底 正常来说一定有primaryField
     return !isEmpty(defaultData)
         ? { option: defaultData, isLoadMore: false }

package/dist/web/components/form/selectMultiple/status/index.d.ts

@@ -1,3 +1,5 @@
+import Loading from './loading';
+export { Loading };
 export declare const Status: {
     ALl_EMPTY: number;
     LOADING: number;

package/dist/web/components/form/selectMultiple/status/index.js

@@ -1,3 +1,5 @@
+import Loading from './loading';
+export { Loading };
 export const Status = {
     ALl_EMPTY: -1,
     LOADING: 0,

package/dist/web/components/form/uploader/index.css

@@ -171,3 +171,29 @@
   font-size: 16px;
   margin: 0 16px;
 }
+.weui-uploader__files .weui-uploader__file_status:before {
+  z-index: 2;
+}
+.weui-uploader__files img.weui-uploader__file-content {
+  width: 100%;
+  height: 100%;
+}
+.weui-uploader__files .weui-uploader__file_status {
+  position: relative;
+}
+.weui-uploader__files .weui-uploader__file-progress {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  color: #f2f2f2;
+}
+
+._weda-fn-upload-result__item .loading_bac {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+._weda-fn-upload-result__status {
+  color: #f2f2f2;
+}

package/dist/web/components/form/uploader/uploader.h5.d.ts

@@ -6,12 +6,19 @@ import type { Except } from 'type-fest';
 /**
  * H5端
  */
-export declare function ImageUploaderH5({ title: label, maxUploadCount, maxSize, acceptTypes, className, id, events, layout: _layout, defaultValue, single, disabled, requiredFlag, labelVisible, onChange, style, imgTypeCls, readOnly, sourceType, isCompressBeforeUpload, compressQuality, compressedHeight, compressedWidth, callbacks, }: H5UploaderProps): JSX.Element;
+export declare function ImageUploaderH5(props: H5UploaderProps): JSX.Element;
+interface TempFileProps {
+    progress?: number;
+    loading?: boolean;
+    realUrl?: string;
+    tempUrl?: string;
+    key?: string;
+}
 export interface SingleImageProps {
-    src: string;
-    deleteBySrc: (url: string) => void;
+    deleteBySrc: (tempFile: TempFileProps) => void;
     disabled: boolean;
     imgTypeCls?: string;
+    tempFile: TempFileProps;
 }
 export interface H5UploaderProps extends Except<CommonFormPropsType, 'events'>, Except<CommonPropsType, 'events'>, EventsType, Pick<DataType, 'isCompressBeforeUpload' | 'compressQuality' | 'compressedHeight' | 'compressedWidth' | 'callbacks'> {
     title?: string;
@@ -25,3 +32,4 @@ export interface H5UploaderProps extends Except<CommonFormPropsType, 'events'>,
     onChange?: (v: any) => void;
     readOnly?: boolean;
 }
+export {};

package/dist/web/components/form/uploader/uploader.h5.js

@@ -2,21 +2,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import * as React from 'react';
 import weui from '../../../utils/weui';
 import classNames from '../../../utils/classnames';
-import { getCloudInstance } from '../../../utils/tcb';
-import isObjectEqual from '../../../utils/isObjectEqual';
-import { useSyncValue } from '../../../utils/hooks/useSyncValue';
-import { randomStr, browserEnv } from '../../../utils/platform';
+import { browserEnv } from '../../../utils/platform';
 import { IMAGE_TYPES, encodeConvert } from './uploader.pc';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
-import { emptyObject } from '../../../utils/constant';
-import { compressImage } from './compress';
 import { toBase64Uri } from '../../../utils/file2base64';
 import { isNil } from '../../../utils/lodash';
-const uploadPath = 'weda-uploader';
+import { useUploader } from './useUploadFile';
+import { errorHandler } from '../../../utils/error';
 /**
  * H5端
  */
-export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, acceptTypes = IMAGE_TYPES, className, id, events = emptyObject, layout: _layout, defaultValue, single = false, disabled = false, requiredFlag = false, labelVisible = true, onChange, style, imgTypeCls, readOnly, sourceType, isCompressBeforeUpload, compressQuality, compressedHeight, compressedWidth, callbacks, }) {
+export function ImageUploaderH5(props) {
+    var _a;
+    const { title: label, maxUploadCount, maxSize = 10, acceptTypes = IMAGE_TYPES, className, id, events, layout: _layout, single = false, disabled = false, requiredFlag = false, labelVisible = true, onChange, style, imgTypeCls, readOnly, sourceType, callbacks, } = props;
     const layout = _layout !== 'vertical' ? 'horizontal' : 'vertical';
     const layoutCls = layout === 'horizontal' ? 'weda-formcells weui-flex' : '';
     const cls = classNames({
@@ -24,77 +22,21 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
         [className]: className,
     });
     const inputRef = React.useRef(null);
-    // 上传中
-    const [uploading, setUploading] = React.useState(false);
-    //上传进度
-    const [progress, setProgress] = React.useState(0);
-    const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
-    const fileIdList = React.useMemo(() => {
-        // 兼容h5默认值为空时情况
-        if (inputValue === null) {
-            setInputValue('');
-        }
-        if (typeof inputValue === 'string') {
-            // single = true 传入的是字符串
-            return [inputValue].filter((i) => i.length > 0); // 排除空串
-        }
-        if (Array.isArray(inputValue)) {
-            return inputValue;
-        }
-        return [];
-    }, [inputValue]);
+    const { tempFile, uploading, upload, getTempFile } = useUploader(props);
     const finalMaxImgCount = React.useMemo(() => {
         if (single)
             return 1;
         return maxUploadCount;
     }, [single, maxUploadCount]);
-    const deleteFile = (url) => {
-        const value = single ? '' : fileIdList.filter((f) => f !== url);
-        setInputValue(value);
-        handleChange([].concat(value), true);
+    const deleteFile = (file) => {
+        const fileList = tempFile.filter((d) => d.key !== file.key);
+        handleChange(fileList, true);
     };
-    const handleChange = (ids, isDelete = false) => {
-        const value = single ? ids[0] || '' : ids;
-        setInputValue(value);
+    const handleChange = (allFile = [], isDelete = false) => {
+        var _a;
+        const value = getTempFile(allFile);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
-        events === null || events === void 0 ? void 0 : events.change({ value, isDelete });
-    };
-    const onProgress = (progressEvent) => {
-        let percentCompleted = 0;
-        try {
-            percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-            percentCompleted < 100 ? percentCompleted : 100;
-        }
-        catch (e) { }
-        setProgress(percentCompleted);
-    };
-    const uploadToTcb = async (file) => {
-        var _a, _b;
-        try {
-            setUploading(true);
-            const tcb = await getCloudInstance();
-            const cloudPath = `${uploadPath}/${randomStr()}-${file === null || file === void 0 ? void 0 : file.name.replace(/[%#]/g, '-')}`;
-            const { fileID } = await tcb.uploadFile({
-                cloudPath,
-                filePath: file,
-                onUploadProgress: onProgress,
-            });
-            (_a = events.success) === null || _a === void 0 ? void 0 : _a.call(events, { value: fileID, file });
-            setUploading(false);
-            return fileID;
-        }
-        catch (err) {
-            (_b = window === null || window === void 0 ? void 0 : window.$w) === null || _b === void 0 ? void 0 : _b.utils.showModal({
-                title: '上传失败，请重试',
-                content: err.message,
-                showCancel: false,
-            });
-            events.error && events.error(err);
-        }
-        finally {
-            setUploading(false);
-            setProgress(0);
-        }
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value, isDelete });
     };
     const accepts = React.useMemo(() => {
         return acceptTypes.length === 0
@@ -104,10 +46,10 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
     const showAdd = React.useMemo(() => {
         if (single) {
             // single 模式时，当数组为空且不在上传文件过程中时显示
-            return fileIdList.length < 1 && !uploading;
+            return tempFile.length < 1 && !uploading;
         }
-        return fileIdList.length < maxUploadCount;
-    }, [fileIdList, single, maxUploadCount, uploading]);
+        return tempFile.length < maxUploadCount;
+    }, [tempFile, single, maxUploadCount, uploading]);
     const uploadChange = async (e) => {
         var _a, _b, _c, _d, _e, _f;
         let files = [...e.target.files];
@@ -126,7 +68,7 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
             });
             return false;
         }
-        if (fileIdList.length + files.length > finalMaxImgCount) {
+        if (tempFile.length + files.length > finalMaxImgCount) {
             (_f = (_e = window === null || window === void 0 ? void 0 : window.$w) === null || _e === void 0 ? void 0 : _e.utils) === null || _f === void 0 ? void 0 : _f.showToast({
                 title: `最多只能上传${finalMaxImgCount}张图片`,
                 icon: 'none',
@@ -150,29 +92,20 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
                 }
             }
             catch (err) {
-                console.error('上传前处理函数抛错', err);
+                errorHandler({
+                    code: 'BEFORE_UPLOAD_ERROR',
+                    error: err,
+                });
                 shouldUploadToCos = false;
             }
         }
         if (shouldUploadToCos === false) {
             return;
         }
-        const promiseAll = files.map(async (f) => {
-            if (isCompressBeforeUpload) {
-                const compressed = await compressImage(f, {
-                    compressedHeight,
-                    compressedWidth,
-                    compressQuality,
-                });
-                return uploadToTcb(compressed);
-            }
-            return uploadToTcb(f);
-        });
-        const result = await Promise.all(promiseAll);
-        const ids = [].concat(fileIdList, result);
-        handleChange(ids);
+        const allFile = await upload(files);
+        handleChange(allFile);
     };
-    return (_jsx("div", { className: cls, id: id, style: style, children: _jsxs("div", { className: classNames('weui-uploader weui-cells weui-cells_form weda-formcells', layout, layoutCls), children: [_jsx("div", { className: classNames('weui-uploader__hd', layout), children: _jsx(UploaderLabel, { layout: layout, label: label, labelVisible: labelVisible, currentCount: fileIdList.length, maxCount: finalMaxImgCount, requiredFlag: requiredFlag }) }), _jsxs("div", { className: "weui-uploader__bd", children: [_jsxs("ul", { className: "weui-uploader__files", id: "uploaderFiles", children: [(fileIdList !== null && fileIdList !== void 0 ? fileIdList : []).map((f) => (_jsx(SingleImage, { src: f, deleteBySrc: deleteFile, disabled: disabled || readOnly || sourceType === 'album', imgTypeCls: imgTypeCls }, f))), fileIdList.length < 1 && readOnly && _jsx(_Fragment, { children: "\u2014" }), uploading && (_jsx("li", { className: `weui-uploader__file weui-uploader__file_status ${imgTypeCls}`, children: _jsxs("div", { className: "weui-uploader__file-content", children: [progress, "%"] }) }))] }), showAdd && !readOnly && (_jsx("div", { className: `weui-uploader__input-box ${imgTypeCls}`, children: !disabled &&
+    return (_jsx("div", { className: cls, id: id, style: style, children: _jsxs("div", { className: classNames('weui-uploader weui-cells weui-cells_form weda-formcells', layout, layoutCls), children: [_jsx("div", { className: classNames('weui-uploader__hd', layout), children: _jsx(UploaderLabel, { layout: layout, label: label, labelVisible: labelVisible, currentCount: tempFile.length, maxCount: finalMaxImgCount, requiredFlag: requiredFlag }) }), _jsxs("div", { className: "weui-uploader__bd", children: [_jsxs("ul", { className: "weui-uploader__files", id: "uploaderFiles", children: [(_a = (tempFile !== null && tempFile !== void 0 ? tempFile : [])) === null || _a === void 0 ? void 0 : _a.map((f) => (_jsx(SingleImage, { tempFile: f, deleteBySrc: deleteFile, disabled: disabled || readOnly || sourceType === 'album', imgTypeCls: imgTypeCls }, f === null || f === void 0 ? void 0 : f.key))), tempFile.length < 1 && readOnly && _jsx(_Fragment, { children: "\u2014" })] }), showAdd && !readOnly && (_jsx("div", { className: `weui-uploader__input-box ${imgTypeCls}`, children: !disabled &&
                                 sourceType !== 'album' &&
                                 (sourceType === 'camera' ? (_jsx("input", { ref: inputRef, onClick: () => {
                                         inputRef.current && (inputRef.current.value = '');
@@ -180,12 +113,15 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
                                         inputRef.current && (inputRef.current.value = '');
                                     }, "data-testid": "uploaderh5_input", id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: !single && !(browserEnv().android && browserEnv().weixin), onChange: uploadChange }))) }))] })] }) }));
 }
-function SingleImage({ src, deleteBySrc, disabled, imgTypeCls, }) {
+function SingleImage({ deleteBySrc, disabled, imgTypeCls, tempFile, }) {
+    const { progress, loading, realUrl, tempUrl } = tempFile;
     const cls = classNames({
         'weui-uploader__file': true,
+        'weui-uploader__file_status': loading,
     });
+    const src = realUrl !== null && realUrl !== void 0 ? realUrl : tempUrl;
     const { data: realSrc, error } = useTempUrl(src);
-    const encodeSrc = encodeConvert(realSrc);
+    const encodeSrc = encodeConvert(realSrc !== null && realSrc !== void 0 ? realSrc : tempUrl);
     // 圆括号冲突，加上引号引用url地址
     const imgStyle = {
         backgroundImage: 'url("' + encodeURI(encodeSrc) + '")',
@@ -198,13 +134,13 @@ function SingleImage({ src, deleteBySrc, disabled, imgTypeCls, }) {
             className: galleryCls,
             onDelete: function () {
                 if (!disabled) {
-                    deleteBySrc(src);
+                    deleteBySrc(tempFile);
                     gallery.hide();
                 }
             },
         });
     };
-    return (_jsx("li", { className: `${cls} ${imgTypeCls}`, style: imgStyle, onClick: showGallery, "data-testid": "uploaderh5_imgStyle", children: error || status ? (_jsx("div", { className: "weui-uploader__file-content", children: error ? (_jsx("i", { role: "img", "aria-label": "\u9519\u8BEF", className: "weui-icon-warn" })) : (_jsx("i", { className: `weui-loading ${imgTypeCls}`, style: { width: 30, height: 30 } })) })) : (false) }));
+    return (_jsxs("li", { className: `${cls} ${imgTypeCls}`, style: imgStyle, onClick: showGallery, "data-testid": "uploaderh5_imgStyle", children: [error || status ? (_jsx("div", { className: "weui-uploader__file-content", children: error ? (_jsx("i", { role: "img", "aria-label": "\u9519\u8BEF", className: "weui-icon-warn" })) : (_jsx("i", { className: `weui-loading ${imgTypeCls}`, style: { width: 30, height: 30 } })) })) : (false), loading && (_jsxs("div", { className: "weui-uploader__file-progress", children: [progress, "%"] }))] }));
 }
 const UploaderLabel = ({ layout, label, currentCount, maxCount, requiredFlag, labelVisible, }) => {
     if (layout === 'horizontal') {

package/dist/web/components/form/uploader/uploader.pc.d.ts

@@ -2,9 +2,17 @@ import * as React from 'react';
 import { H5UploaderProps } from './uploader.h5';
 export declare const CLASS_PREFIX = "weda-uploader-pc";
 export declare const IMAGE_TYPES: string[];
+interface TempFileProps {
+    progress?: number;
+    loading?: boolean;
+    realUrl?: string;
+    tempUrl?: string;
+    key?: string;
+}
 export declare function UploaderPCInner(props: PropsType): JSX.Element;
 export interface TcbImageProps {
     fileID?: string;
+    tempFile?: TempFileProps;
     isZoom?: boolean;
     onError?: (e: unknown) => void;
     imgTypeCls?: string;
@@ -20,3 +28,4 @@ export interface PropsType extends H5UploaderProps {
     readOnly?: boolean;
 }
 export declare function encodeConvert(src: any): any;
+export {};

package/dist/web/components/form/uploader/uploader.pc.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { Upload, Icon, ErrorTip, ImagePreview, ConfigProvider, } from 'tea-component';
-import { getCloudInstance } from '../../../utils/tcb';
-import { randomStr } from '../../../utils/platform';
-import isObjectEqual from '../../../utils/isObjectEqual';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
-import { compressImage } from './compress';
 import { toBase64Uri } from '../../../utils/file2base64';
 import { isNil } from '../../../utils/lodash';
+import { errorHandler } from '../../../utils/error';
 import { WdIcon } from '../../wd-icon';
+import { useUploader } from './useUploadFile';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -22,32 +20,11 @@ export const IMAGE_TYPES = [
     'image/gif',
 ];
 export function UploaderPCInner(props) {
-    const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
-    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events, single = false, disabled = false, onChange, imgTypeCls, value, // 数据管理后台中，formily使用此字段传默认值
-    readOnly, isCompressBeforeUpload, compressQuality, compressedHeight, compressedWidth, sourceType, callbacks, } = props;
-    // 上传中
-    const [uploading, setUploading] = React.useState(false);
-    //上传进度
-    const [progress, setProgress] = React.useState(0);
-    // 文件列表
-    const [fileIDList, setfileIDList] = React.useState([]);
-    const defaultValueRef = React.useRef(null);
-    React.useEffect(() => {
-        if (isObjectEqual(defaultValueRef.current, defaultValue))
-            return;
-        let initialValue = []
-            .concat(value ? value : defaultValue)
-            .filter((d) => typeof d === 'string' && d !== '');
-        if (single) {
-            initialValue = initialValue[0] ? [initialValue[0]] : [];
-        }
-        defaultValueRef.current = defaultValue;
-        setfileIDList(initialValue);
-    }, [defaultValue, single]);
-    const handleChange = (ids, isDelete = false) => {
+    const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, acceptTypes = IMAGE_TYPES, events, single = false, disabled = false, onChange, imgTypeCls, readOnly, sourceType, callbacks, } = props;
+    const { tempFile, uploading, upload, getTempFile } = useUploader(props);
+    const handleChange = (allFile = [], isDelete = false) => {
         var _a;
-        setfileIDList(ids);
-        const value = single ? ids[0] || '' : ids;
+        const value = getTempFile(allFile);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value, isDelete });
     };
@@ -69,7 +46,12 @@ export function UploaderPCInner(props) {
                     icon: 'error',
                 });
             }
-            catch (e) { }
+            catch (e) {
+                errorHandler({
+                    code: 'BEFORE_UPLOAD_ERROR',
+                    error: e,
+                });
+            }
             return Promise.reject(false);
         }
         const ids = fileList.filter((f) => !!f.id);
@@ -83,7 +65,7 @@ export function UploaderPCInner(props) {
             });
             return Promise.reject(false);
         }
-        if (fileIDList.length + fileList.length > finalMaxImgCount) {
+        if (tempFile.length + fileList.length > finalMaxImgCount) {
             (_f = (_e = window === null || window === void 0 ? void 0 : window.$w) === null || _e === void 0 ? void 0 : _e.utils) === null || _f === void 0 ? void 0 : _f.showToast({
                 title: `最多只能上传${finalMaxImgCount}张图片`,
                 icon: 'error',
@@ -110,75 +92,23 @@ export function UploaderPCInner(props) {
                 }
             }
             catch (err) {
-                console.error('上传前处理函数抛错', err);
+                errorHandler({
+                    code: 'BEFORE_UPLOAD_ERROR',
+                    error: err,
+                });
                 shouldUploadToCos = false;
             }
         }
         if (shouldUploadToCos === false) {
             return Promise.reject(false);
         }
-        uploadTcbMulti(fileList);
-        return Promise.reject(false);
-    };
-    // 多张上传
-    const uploadTcbMulti = async (files) => {
-        const promiseAll = files.map(async (f) => {
-            if (isCompressBeforeUpload) {
-                const compressed = await compressImage(f, {
-                    compressedHeight,
-                    compressedWidth,
-                    compressQuality,
-                });
-                return uploadTcb(compressed);
-            }
-            return uploadTcb(f);
-        });
-        const result = await Promise.all(promiseAll);
-        const ids = [].concat(fileIDList, result);
-        handleChange(ids);
-    };
-    // 自定义上传到 Tcb 的 COS
-    const uploadTcb = async (file) => {
-        var _a, _b, _c;
-        try {
-            setUploading(true);
-            const tcb = await getCloudInstance();
-            const cloudPath = `${uploadPath}/${randomStr()}-${file === null || file === void 0 ? void 0 : file.name.replace(/[%#]/g, '-')}`;
-            const { fileID } = await tcb.uploadFile({
-                cloudPath,
-                filePath: file,
-                onUploadProgress: onProgress,
-            });
-            (_a = events === null || events === void 0 ? void 0 : events.success) === null || _a === void 0 ? void 0 : _a.call(events, { value: fileID, file });
-            setUploading(false);
-            return fileID;
-        }
-        catch (err) {
-            (_c = (_b = window === null || window === void 0 ? void 0 : window.$w) === null || _b === void 0 ? void 0 : _b.utils) === null || _c === void 0 ? void 0 : _c.showToast({
-                title: `上传失败，请重试 ${err.message}`,
-                icon: 'error',
-            });
-            (events === null || events === void 0 ? void 0 : events.error) && events.error(err);
-        }
-        finally {
-            setUploading(false);
-            setProgress(0);
-        }
-    };
-    // 计算上传进度
-    const onProgress = (progressEvent) => {
-        let percentCompleted = 0;
-        try {
-            percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-            percentCompleted < 100 ? percentCompleted : 100;
-        }
-        catch (e) { }
-        setProgress(percentCompleted);
+        const allFile = await upload(fileList);
+        handleChange(allFile);
     };
     // 删除图片
-    const deleteHandle = (fileID) => {
-        const ids = fileIDList.filter((d) => d !== fileID);
-        handleChange(ids, true);
+    const deleteHandle = (fileItem) => {
+        const fileList = tempFile.filter((d) => d.key !== fileItem.key);
+        handleChange(fileList, true);
     };
     // 转换后的属性
     const extraProps = {};
@@ -188,9 +118,9 @@ export function UploaderPCInner(props) {
         acceptTypes.length === 0 ? IMAGE_TYPES : Array.from(new Set(acceptTypes));
     tips && (extraProps['title'] = tips);
     maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
-    const hasActions = !readOnly && !(disabled || sourceType === 'camera');
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [fileIDList.map((d) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { fileID: d, imgTypeCls: imgTypeCls, isZoom: true, preivewIcon: "td:browse", actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d))), uploading && (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx(Icon, { type: "loading" }), !!progress && (_jsxs("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: ["\u4E0A\u4F20", progress, "%..."] }))] }, "_place_image") })), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && fileIDList.length < 1 && _jsx("div", { children: "\u2014" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && fileIDList.length < maxUploadCount) ||
-                            (single && fileIDList.length < 1 && !uploading)) &&
+    const hasActions = !uploading && !readOnly && !(disabled || sourceType === 'camera');
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [tempFile === null || tempFile === void 0 ? void 0 : tempFile.map((d) => (_jsx("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: _jsx(TcbImage, { tempFile: d, imgTypeCls: imgTypeCls, isZoom: true, preivewIcon: "td:browse", actions: hasActions && (_jsx(WdIcon, { className: `${CLASS_PREFIX}__image-actions-delete`, name: "td:delete", onClick: () => deleteHandle(d), size: "sm" })) }) }, d.key))), _jsxs("div", { className: `${CLASS_PREFIX}__input-box`, children: [readOnly && tempFile.length < 1 && _jsx("div", { children: "\u2014" }), sourceType === 'camera' || (disabled && !readOnly) ? (_jsx("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}`, children: _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] }) })) : (((!single && tempFile.length < maxUploadCount) ||
+                            (single && tempFile.length < 1 && !uploading)) &&
                             !readOnly && (
                         // single 模式时，当数组为空且不在上传文件过程中时显示
                         _jsx(Upload, { ...extraProps, beforeUpload: beforeHandle, children: _jsxs("li", { 
@@ -202,24 +132,26 @@ export function UploaderPCInner(props) {
                                 className: `_weda-fn-upload-result__item _weda-fn-upload-result__item--upload ${imgTypeCls}`, children: [imgTypeCls, _jsxs("div", { className: "_weda-fn-upload-result__status", children: [_jsx("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }), _jsx("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset", children: btnTitle })] })] }) })))] })] }) }));
 }
 export const TcbImage = (props) => {
-    const { fileID, isZoom, imgTypeCls, preivewIcon, actions, ...rest } = props;
+    const { fileID, tempFile = { progress: 100, loading: false, realUrl: null, tempUrl: null }, isZoom, imgTypeCls, preivewIcon, actions, ...rest } = props;
+    const { progress, loading, realUrl, tempUrl } = tempFile;
+    const fileCloudID = (realUrl !== null && realUrl !== void 0 ? realUrl : tempUrl) || fileID;
     const [isError, setIsError] = React.useState(false);
-    const { data: src, error: requestError } = useTempUrl(fileID);
+    const { data: src, error: requestError } = useTempUrl(fileCloudID);
     const encodeSrc = encodeConvert(src);
     const renderImg = () => {
         if (isError || requestError)
             return _jsx(ErrorTip, {});
         if (!src)
             return null;
-        return (_jsx("img", { "data-testid": "uploaderpc_imgStyle", className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), onError: (e) => {
-                setIsError(true);
-                (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
-            } }, fileID));
+        return (_jsxs(_Fragment, { children: [_jsx("img", { "data-testid": "uploaderpc_imgStyle", className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), onError: (e) => {
+                        setIsError(true);
+                        (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
+                    } }), loading && (_jsxs("div", { className: "_weda-fn-upload-result__status loading_bac", children: [_jsx(Icon, { type: "loading" }), _jsxs("div", { className: "wedatea2td-mt-1n wedatea2td-fz-reset", children: [progress, "%"] })] }))] }));
     };
     if (!isZoom)
         return renderImg();
     const previewProps = {
-        key: fileID,
+        key: fileCloudID,
         'data-testid': 'uploaderpc_imgStyle',
         className: `${CLASS_PREFIX}__image ${imgTypeCls}`,
         ...rest,
@@ -245,6 +177,10 @@ export function encodeConvert(src) {
             return decodeURIComponent(src);
         }
         catch (e) {
+            errorHandler({
+                code: 'EncodeConvert_Error',
+                error: e,
+            });
             return src;
         }
     }

package/dist/web/components/form/uploader/useUploadFile.d.ts

@@ -0,0 +1,16 @@
+export declare const CLASS_PREFIX = "weda-uploader-pc";
+export declare const IMAGE_TYPES: string[];
+interface TempFileProps {
+    progress?: number;
+    loading?: boolean;
+    realUrl?: string;
+    tempUrl?: string;
+    key?: string;
+}
+export declare function useUploader(props: any): {
+    tempFile: TempFileProps[];
+    uploading: boolean;
+    upload: (fileList: any) => Promise<any[]>;
+    getTempFile: (allFile?: any[]) => any[];
+};
+export {};