@cloudbase/weda-ui 3.5.3 → 3.6.1

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

@@ -1,12 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Upload, Button, Icon, ErrorTip, ImagePreview, ConfigProvider, } from 'tea-component';
-import classNames from '../../../utils/classnames';
+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 { emptyObject } from '../../../utils/constant';
 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 { WdIcon } from '../../wd-icon';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -19,22 +21,10 @@ export const IMAGE_TYPES = [
     'image/tiff',
     'image/gif',
 ];
-/**
- * 上传图片-官方组件
- */
-export function UploaderPC({ layout, className, id, style, title, tips, ...props }) {
-    const cls = classNames({
-        'weda-ui': true,
-        [CLASS_PREFIX]: true,
-        [layout]: layout,
-        [className]: className,
-    });
-    return (_jsxs("div", { className: cls, id: id, style: style, children: [_jsxs("div", { className: `${CLASS_PREFIX}__header`, children: [title && _jsx("div", { className: `${CLASS_PREFIX}__title`, children: title }), tips && (_jsx("div", { className: `${CLASS_PREFIX}__description`, children: tips || '' }))] }), _jsx(UploaderPCInner, { ...props })] }));
-}
 export function UploaderPCInner(props) {
     const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
-    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, disabled = false, onChange, imgTypeCls, value, // 数据管理后台中，formily使用此字段传默认值
-    readOnly, } = props;
+    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);
     //上传进度
@@ -59,10 +49,10 @@ export function UploaderPCInner(props) {
         setfileIDList(ids);
         const value = single ? ids[0] || '' : ids;
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
-        (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
     };
     // 方法：上传前，判断图片大小、数量是否满足，取消默认组件的上传事件，用自定义的 tcb 上传方法
-    const beforeHandle = (file, fileList, isAccepted, error) => {
+    const beforeHandle = async (file, fileList, isAccepted, error) => {
         var _a, _b, _c, _d, _e, _f;
         const finalMaxImgCount = single ? 1 : maxUploadCount;
         if (!isAccepted) {
@@ -80,32 +70,69 @@ export function UploaderPCInner(props) {
                 });
             }
             catch (e) { }
-            return false;
+            return Promise.reject(false);
         }
         const ids = fileList.filter((f) => !!f.id);
         if (ids.length < fileList.length)
-            return false;
+            return Promise.reject(false);
         if (fileList.length > finalMaxImgCount) {
             // 防止一下子选择过多文件
             (_d = (_c = window === null || window === void 0 ? void 0 : window.$w) === null || _c === void 0 ? void 0 : _c.utils) === null || _d === void 0 ? void 0 : _d.showToast({
                 title: `最多只能上传${finalMaxImgCount}张图片，请重新选择`,
                 icon: 'error',
             });
-            return false;
+            return Promise.reject(false);
         }
         if (fileIDList.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',
             });
-            return false;
+            return Promise.reject(false);
+        }
+        let shouldUploadToCos = true;
+        if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.beforeUpload) === 'function') {
+            try {
+                const base64Uri = await Promise.all(fileList.map((file) => toBase64Uri(file)));
+                const ret = await callbacks.beforeUpload({
+                    files: fileList,
+                    base64Uri,
+                });
+                if (typeof ret === 'boolean') {
+                    shouldUploadToCos = ret;
+                }
+                else if (Array.isArray(ret) &&
+                    ret.every((item) => item instanceof File)) {
+                    fileList = ret;
+                }
+                else if (!isNil(ret)) {
+                    throw new TypeError('web端返回值接受布尔值 / File对象数组');
+                }
+            }
+            catch (err) {
+                console.error('上传前处理函数抛错', err);
+                shouldUploadToCos = false;
+            }
+        }
+        if (shouldUploadToCos === false) {
+            return Promise.reject(false);
         }
         uploadTcbMulti(fileList);
-        return false;
+        return Promise.reject(false);
     };
     // 多张上传
     const uploadTcbMulti = async (files) => {
-        const promiseAll = files.map((f) => uploadTcb(f));
+        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);
@@ -122,16 +149,16 @@ export function UploaderPCInner(props) {
                 filePath: file,
                 onUploadProgress: onProgress,
             });
-            (_a = events.success) === null || _a === void 0 ? void 0 : _a.call(events, { value: fileID, file });
+            (_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: '上传失败，请检查网络后重试',
+                title: `上传失败，请重试 ${err.message}`,
                 icon: 'error',
             });
-            events.error && events.error(err);
+            (events === null || events === void 0 ? void 0 : events.error) && events.error(err);
         }
         finally {
             setUploading(false);
@@ -158,12 +185,11 @@ export function UploaderPCInner(props) {
     //是否支持多选
     extraProps['multiple'] = !single;
     extraProps['accept'] =
-        acceptTypes.includes('image/*') || acceptTypes.length === 0
-            ? IMAGE_TYPES
-            : Array.from(new Set(acceptTypes));
+        acceptTypes.length === 0 ? IMAGE_TYPES : Array.from(new Set(acceptTypes));
     tips && (extraProps['title'] = tips);
     maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "_weda-fn-upload-result", children: [fileIDList.map((d) => (_jsxs("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, children: [_jsx(TcbImage, { fileID: d, imgTypeCls: imgTypeCls }), readOnly ? null : (_jsx("div", { className: `_weda-fn-upload-result__op ${imgTypeCls}`, children: _jsx(Button, { disabled: disabled, onClick: () => deleteHandle(d), className: `${CLASS_PREFIX}__btn`, children: "\u5220\u9664" }) }))] }, 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" }), 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) ||
+    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)) &&
                             !readOnly && (
                         // single 模式时，当数组为空且不在上传文件过程中时显示
@@ -176,25 +202,41 @@ 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, ...rest } = props;
+    const { fileID, isZoom, imgTypeCls, preivewIcon, actions, ...rest } = props;
     const [isError, setIsError] = React.useState(false);
     const { data: src, error: requestError } = useTempUrl(fileID);
     const encodeSrc = encodeConvert(src);
-    if (isError || requestError) {
-        return _jsx(ErrorTip, {});
-    }
-    if (src) {
-        return isZoom ? (_jsx(ImagePreview, { "data-testid": "uploaderpc_imgStyle", className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), previewSrc: encodeURI(encodeSrc), 
-            /** @ts-expect-error tea imagepreview onError */
-            onError: (e) => {
-                setIsError(true);
-                (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
-            } }, fileID)) : (_jsx("img", { "data-testid": "uploaderpc_imgStyle", className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), onError: (e) => {
+    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));
+    };
+    if (!isZoom)
+        return renderImg();
+    const previewProps = {
+        key: fileID,
+        'data-testid': 'uploaderpc_imgStyle',
+        className: `${CLASS_PREFIX}__image ${imgTypeCls}`,
+        ...rest,
+        previewSrc: encodeURI(encodeSrc),
+        onError: (e) => {
+            setIsError(true);
+            (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
+        },
+    };
+    if (preivewIcon || actions) {
+        return (_jsx(ImagePreview, { ...previewProps, children: (open) => {
+                return (_jsxs(_Fragment, { children: [renderImg(), _jsxs("div", { className: `_weda-fn-upload-result__op ${imgTypeCls} ${CLASS_PREFIX}__image-actions`, children: [preivewIcon && (_jsx(WdIcon, { name: preivewIcon, onClick: open, className: `${CLASS_PREFIX}__image-actions-open`, size: "sm" })), actions && (_jsxs("span", { className: `${CLASS_PREFIX}__image-actions-separator`, children: [' ', "|", ' '] })), actions] })] }));
+            } }));
+    }
+    else {
+        return _jsx(ImagePreview, { ...previewProps, src: encodeURI(encodeSrc) });
     }
-    return null;
 };
 //兼容私有化下载链接encodeURIComponent被编码情况
 export function encodeConvert(src) {

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

@@ -86,10 +86,9 @@
 }
 
 .weda-upload-file-pc .weda-upload-file-pc__btn-descripe {
-  margin-left: 16px;
-  font-size: 0.75em;
   line-height: 20px;
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--wd-color-text-placeholder, rgba(0, 0, 0, 0.4));
+  font-size: var(--wd-font-size-2, 0.75em);
 }
 
 .weda-upload-file-pc .wedatea2td-list--divider > li {
@@ -108,9 +107,9 @@
 
 .weda-upload-file-pc .weda-upload-file-pc--item-header {
   border: 1px solid #e7e7e7;
-  font-size: 0.875em;
   line-height: 1.375em;
-  color: rgba(0, 0, 0, 0.4);
+  font-size: var(--wd-font-size-3, 0.875em);
+  color: var(--wd-color-text-placeholder, rgba(0, 0, 0, 0.4));
   margin-top: 16px;
 }
 
@@ -120,6 +119,7 @@
   font-size: 0.875em;
   line-height: 1.375em;
   color: rgba(0, 0, 0, 0.9);
+  align-items: center;
 }
 
 .weda-upload-file-pc
@@ -164,10 +164,10 @@
 
 .weda-upload-file-pc .weda-upload-file-pc__btn--weak {
   border-color: #dcdcdc;
-  color: rgba(0, 0, 0, 0.9);
   width: 88px;
-  font-size: 14px;
   font-weight: normal;
+  color: var(--wd-color-text-default, rgba(0, 0, 0, 0.9));
+  font: var(--wd-typography-body-md, 14px);
 }
 
 .weda-upload-file-pc
@@ -190,8 +190,8 @@
   .wedatea2td-btn {
   font-size: 0.875em;
   line-height: 1.375em;
-  color: #0052d9;
   margin-right: 12px;
+  color: var(--wd-color-brand, #0052d9);
 }
 
 .weda-upload-file-pc
@@ -215,9 +215,9 @@
 .weda-upload-file-pc
   .weda-upload-file-pc--item-empty
   .weda-upload-file-pc--item {
-  font-size: 0.875em;
-  color: rgba(0, 0, 0, 0.4);
   line-height: 1.375em;
+  color: var(--wd-color-text-placeholder, rgba(0, 0, 0, 0.4));
+  font-size: var(--wd-font-size-3, 0.875em);
 }
 
 /* ----上传文件----  h5 */
@@ -255,9 +255,10 @@
 .weda-upload-file-mobile .weda-upload-file-mobile__tips {
   display: block;
   margin-top: 8px;
-  font-size: 0.75em;
+  margin-bottom: 8px;
   line-height: 1.25em;
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--wd-color-text-placeholder, rgba(0, 0, 0, 0.4));
+  font-size: var(--wd-font-size-2, 0.75em);
 }
 
 .weda-upload-file-mobile
@@ -283,6 +284,7 @@
 
 .weda-upload-file-mobile .weda-upload-file-mobile__btn-group {
   display: flex;
+  width: 70px;
 }
 
 .weda-upload-file-mobile .weda-upload-file-mobile__item .wedatea2td-icon {
@@ -320,7 +322,7 @@
   .weda-upload-file-mobile__item-left {
   flex: 1;
   margin-right: 4px;
-  width: 70%;
+  max-width: calc(100% - 75px);
 }
 
 .weda-upload-file-mobile
@@ -345,7 +347,7 @@
 .weda-upload-file-mobile
   .weda-upload-file-mobile__item
   .weda-upload-file-mobile__file-status {
-  margin-left: 0.28571rem;
+  margin-right: 0.28571rem;
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -377,21 +379,17 @@
   .weda-upload-file-mobile__item
   .weda-upload-file-mobile__file-status--msg {
   width: 4.2rem;
-  margin-left: 4px;
-  font-size: 0.75em;
   line-height: 1.25em;
-  color: rgba(0, 0, 0, 0.9);
 }
 
 .weda-upload-file-mobile
   .weda-upload-file-mobile__item
   .weda-upload-file-mobile__file-foot {
-  font-size: 0.75em;
   line-height: 1.25em;
-  color: rgba(0, 0, 0, 0.4);
   margin-top: 8px;
   display: flex;
-  justify-content: space-between;
+  color: var(--wd-color-text-placeholder, rgba(0, 0, 0, 0.4));
+  font-size: var(--wd-font-size-2, 0.75em);
 }
 
 .weda-upload-file-mobile

package/dist/web/components/form/uploaderFile/uploadFile.h5.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { CommonFormPropsType } from '../types';
+import type { DataType } from '../../../../configs/components/wd-upload-file';
 export declare const FILES_TYPES: string[];
 export declare function UploadFileH5({ layout, id, style, labelVisible, label, requiredFlag, disabled, className, acceptTypes, tips, btnTitle, maxUploadCount, maxSize, deleteVisible, downloadVisible, value, // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
-events, defaultValue, uploadPath, single, onChange, isEdit, $node, readOnly, }: IUploadFileH5): JSX.Element;
+events, defaultValue, uploadPath, single, onChange, isEdit, $node, readOnly, callbacks, }: IUploadFileH5): JSX.Element;
 export interface IUploadFileH5 extends CommonFormPropsType {
     className?: string;
     label?: string;
@@ -21,4 +22,5 @@ export interface IUploadFileH5 extends CommonFormPropsType {
     onChange?: (v: any) => void;
     isEdit: boolean;
     readOnly?: boolean;
+    callbacks?: DataType['callbacks'];
 }

package/dist/web/components/form/uploaderFile/uploadFile.h5.js

@@ -2,15 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import weui from '../../../utils/weui';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import { ConfigProvider, Button, Icon, Text, List, Progress, Tooltip, } from 'tea-component';
-import { filterStrList, isCloudFileID, isHttpFileID, transSize, downloadFile, transFileCloudidToName, randomStr, isInIde, isWebInMiniprogram, } from '../../../utils/platform';
+import { ConfigProvider, Button, Text, List, Progress, Tooltip, } from 'tea-component';
+import { filterStrList, isCloudFileID, isHttpFileID, transSize, transFileCloudidToName, randomStr, isInIde, isWebInMiniprogram, transFileName, } from '../../../utils/platform';
 import { getCloudInstance } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
 import { emptyArray, emptyObject } from '../../../utils/constant';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
 import { getParentForm } from '../../../utils/widget-api';
-import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { WdButton } from '../../wd-button/wd-button';
+import { toBase64Uri } from '../../../utils/file2base64';
+import { isNil } from '../../../utils/lodash';
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-mobile';
 // 默认图片类型
@@ -39,9 +41,9 @@ export function UploadFileH5({
 layout, id = '', style = defaultStyle, labelVisible = true, label = '上传文件', requiredFlag = false, disabled = false, className = '', acceptTypes = emptyArray, 
 // 组件属性
 tips = '', btnTitle = '点击上传', maxUploadCount = 9, maxSize = 10, deleteVisible = true, downloadVisible = true, value = emptyArray, // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
-events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true, onChange = null, isEdit = true, $node, readOnly, }) {
+events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true, onChange = null, isEdit = true, $node, readOnly, callbacks, }) {
     var _a;
-    const [fileIDList, setfileIDList] = useSyncValue(isInIde() ? [] : filterStrList([].concat(defaultValue, value)), (a, b) => isObjectEqual(a, b, true)); // 上传成功文件ID列表，fileID[]
+    const [fileIDList, setfileIDList] = React.useState(isInIde() ? [] : filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
     const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
     const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
     // 两次默认值不同, 需要刷新
@@ -54,7 +56,14 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
         //有有效默认值时不刷新，解决初次渲染默认值不显示问题
         if (!isInIde() && !isObjectEqual(prevDefaultRef.current, defaultValue)) {
             prevDefaultRef.current = defaultValue;
-            setfileIDList(filterStrList([].concat(defaultValue)));
+            changeTypeRef.current = '';
+            if (defaultValue === null) {
+                fileRef.current = [];
+                setfileIDList([]);
+            }
+            else {
+                setfileIDList(filterStrList([].concat(defaultValue)));
+            }
         }
     }, [defaultValue]);
     React.useEffect(() => {
@@ -65,9 +74,12 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
         const pureFileIDList = fileIDList.filter((d) => isCloudFileID(d) || isHttpFileID(d));
         const value = single ? pureFileIDList[0] || '' : pureFileIDList;
         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 });
+        if (changeTypeRef.current) {
+            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
+        }
         if (changeTypeRef.current === 'add') {
-            (_b = events === null || events === void 0 ? void 0 : events.success) === null || _b === void 0 ? void 0 : _b.call(events, { value: pureFileIDList });
+            const files = pureFileIDList.map((d) => { var _a; return (_a = fileSizeObj[d]) === null || _a === void 0 ? void 0 : _a.file; });
+            (_b = events === null || events === void 0 ? void 0 : events.success) === null || _b === void 0 ? void 0 : _b.call(events, { value: pureFileIDList, file: files });
         }
         fileRef.current = fileIDList;
     }, [fileIDList]);
@@ -77,6 +89,7 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
         //'weui-cells': true,
         //'weui-cells_form': true,
         'weui-cells_checkbox': true,
+        'weui-upload-file': true,
         [className]: className,
     });
     const accepts = React.useMemo(() => {
@@ -85,11 +98,11 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
             : Array.from(new Set(acceptTypes));
     }, [acceptTypes]);
     // 上传后文件列表 fileIDList 改变事件，'add'|'delete'
-    const handleChange = ({ fileID, uuid, type, size }) => {
+    const handleChange = ({ fileID, uuid, type, size, file }) => {
         if (fileID) {
             changeTypeRef.current = type;
             if (type === 'add') {
-                setFileSizeObj((obj) => ({ ...obj, [fileID]: size }));
+                setFileSizeObj((obj) => ({ ...obj, [fileID]: { size, file } }));
                 setfileIDList((fileIDList) => [...fileIDList, fileID]);
             }
             else {
@@ -119,8 +132,8 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
                 isEdit,
                 events,
                 fileSizeObj,
-            }, children: _jsx("div", { "data-testid": "uploadFileH5", className: cls, id: id, style: style, children: _jsxs("div", { className: classNames(`${CLASS_PREFIX}`), children: [isEdit && (_jsx("div", { className: classNames(`${CLASS_PREFIX}__hd`, layout), children: _jsx("div", { children: btnDisabled ? (readOnly ? null : (_jsx(Button, { type: "weak", className: classNames(`${CLASS_PREFIX}__btn--weak`), disabled: btnDisabled, children: btnTitle }))) : (_jsxs("div", { children: [_jsx("input", { id: "uploaderInput", type: "file", "data-testid": "button-up", className: "weui-uploader-mobile__input", accept: accepts.join(','), multiple: !single, onChange: (e) => {
-                                                const fileList = [...e.target.files];
+            }, children: _jsx("div", { "data-testid": "uploadFileH5", className: cls, id: id, style: style, children: _jsxs("div", { className: classNames(`${CLASS_PREFIX}`), children: [isEdit && (_jsx("div", { className: classNames(`${CLASS_PREFIX}__hd`, layout), children: _jsx("div", { children: btnDisabled ? (readOnly ? null : (_jsx(WdButton, { variant: "outline", className: classNames(`${CLASS_PREFIX}__btn--weak`), disabled: btnDisabled, text: btnTitle }))) : (_jsxs("div", { children: [_jsx("input", { id: "uploaderInput", type: "file", "data-testid": "button-up", className: "weui-uploader-mobile__input", accept: accepts.join(','), multiple: !single, onChange: async (e) => {
+                                                let fileList = [...e.target.files];
                                                 if (single && fileList.length > 1) {
                                                     weui.alert(`上传文件总数不能超过1个`);
                                                     return false;
@@ -139,9 +152,36 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
                                                     weui.alert(`请上传不超过1024M的文件`);
                                                     return false;
                                                 }
+                                                let shouldUploadToCos = true;
+                                                if (typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.beforeUpload) === 'function') {
+                                                    try {
+                                                        const base64Uri = await Promise.all(fileList.map((file) => toBase64Uri(file)));
+                                                        const ret = await callbacks.beforeUpload({
+                                                            files: fileList,
+                                                            base64Uri,
+                                                        });
+                                                        if (typeof ret === 'boolean') {
+                                                            shouldUploadToCos = ret;
+                                                        }
+                                                        else if (Array.isArray(ret) &&
+                                                            ret.every((item) => item instanceof File)) {
+                                                            fileList = ret;
+                                                        }
+                                                        else if (!isNil(ret)) {
+                                                            throw new TypeError('web端返回值接受布尔值 / File对象数组');
+                                                        }
+                                                    }
+                                                    catch (err) {
+                                                        console.error('上传前处理函数抛错', err);
+                                                        shouldUploadToCos = false;
+                                                    }
+                                                }
+                                                if (shouldUploadToCos === false) {
+                                                    return;
+                                                }
                                                 fileList.forEach((f) => (f['_uuid'] = randomStr()));
                                                 setFileList((list) => [...list, ...fileList]);
-                                            } }), _jsx("a", { type: "weak", className: "wedatea2td-btn wedatea2td-btn--weak", children: btnTitle }), !single && (_jsx(Text, { className: `${CLASS_PREFIX}__tips`, children: "\u652F\u6301\u6279\u91CF\u4E0A\u4F20" }))] })) }) })), _jsxs("div", { className: `${CLASS_PREFIX}__bd`, children: [fileIDList && fileIDList.length > 0 && (_jsx("div", { className: "weda-uploader-files_split" })), _jsxs(List, { children: [fileIDList.map((d) => (_jsx(List.Item, { children: _jsx(TcbFileEcho, { fileID: d, fileList: fileList, onChange: handleChange, disabled: disabled, deleteVisible: deleteVisible, downloadVisible: downloadVisible, formType: formType }) }, d))), fileList.map((item) => (_jsx(List.Item, { children: _jsx(TcbFileUpload, { disabled: disabled, file: item, downloadVisible: downloadVisible, deleteVisible: deleteVisible && !disabled, formType: formType }) }, item === null || item === void 0 ? void 0 : item._uuid)))] })] })] }) }) }) }))({
+                                            } }), _jsx(WdButton, { variant: "outline", className: "wedatea2td-btn wedatea2td-btn--weak", text: btnTitle, size: "sm" }), !single && (_jsx(Text, { className: `${CLASS_PREFIX}__tips`, children: "\u652F\u6301\u6279\u91CF\u4E0A\u4F20" }))] })) }) })), _jsx("div", { className: `${CLASS_PREFIX}__bd`, children: _jsxs(List, { children: [fileIDList.map((d) => (_jsx(List.Item, { children: _jsx(TcbFileEcho, { fileID: d, fileList: fileList, onChange: handleChange, disabled: disabled, deleteVisible: deleteVisible, downloadVisible: downloadVisible, formType: formType }) }, d))), fileList.map((item) => (_jsx(List.Item, { children: _jsx(TcbFileUpload, { disabled: disabled, file: item, downloadVisible: downloadVisible, deleteVisible: deleteVisible && !disabled, formType: formType }) }, item === null || item === void 0 ? void 0 : item._uuid)))] }) })] }) }) }) }))({
         id,
         className: cls,
         style,
@@ -155,7 +195,7 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
  * 基于 FileID 文件回显组件
  */
 const TcbFileEcho = ({ fileID, disabled, formType }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { fileSizeObj } = React.useContext(FileContext) || {};
     const { data: src, error } = useTempUrl(fileID);
     if (error) {
@@ -170,11 +210,11 @@ const TcbFileEcho = ({ fileID, disabled, formType }) => {
             return transFileCloudidToName(fileID);
         }
         else {
-            return fileID;
+            return transFileName(fileID);
         }
     }, [fileID]);
     //上传文件列表展示
-    return (_jsxs("div", { className: `${CLASS_PREFIX}__item`, children: [_jsx("div", { className: `${CLASS_PREFIX}__item-left`, children: _jsx(UploadFileStatus, { title: label, size: fileSizeObj[fileID] || '-', formType: formType }) }), _jsx("div", { className: `${CLASS_PREFIX}__btn-group`, children: _jsx(UploadFileAction, { title: label, disabled: disabled, status: "UPLOAD_STATUS_SUCCESS", fileID: fileID, src: src }) })] }));
+    return (_jsxs("div", { className: `${CLASS_PREFIX}__item`, children: [_jsx("div", { className: `${CLASS_PREFIX}__item-left`, children: _jsx(UploadFileStatus, { title: label, size: ((_c = fileSizeObj[fileID]) === null || _c === void 0 ? void 0 : _c.size) || '-', formType: formType }) }), _jsx("div", { className: `${CLASS_PREFIX}__btn-group`, children: _jsx(UploadFileAction, { title: label, disabled: disabled, status: "UPLOAD_STATUS_SUCCESS", fileID: fileID, src: src }) })] }));
 };
 /**
  * 基于 File 上传文件过程组件
@@ -210,7 +250,8 @@ const TcbFileUpload = ({ file, disabled, formType }) => {
                     setPercent(percent < 100 ? percent : 100);
                 },
             });
-            !cancelRef.current && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, type: 'add', uuid, size }));
+            !cancelRef.current &&
+                (onChange === null || onChange === void 0 ? void 0 : onChange({ fileID, type: 'add', uuid, size, file }));
             setStatus('UPLOAD_STATUS_SUCCESS');
         }
         catch (err) {
@@ -227,16 +268,15 @@ const TcbFileUpload = ({ file, disabled, formType }) => {
  * 上传文件状态组件
  */
 const UploadFileStatus = ({ status = 'UPLOAD_STATUS_SUCCESS', percent = 0, size, title = null, percentSize = 0, formType, }) => {
-    var _a, _b;
+    var _a;
     const { isEdit } = React.useContext(FileContext) || {};
     //上传中、待上传状态
     if (status == 'UPLOAD_STATUS_LOADING' ||
         (status == 'UPLOAD_STATUS_PENDING' && percent)) {
         return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${CLASS_PREFIX}__file-detail`, children: _jsx(Text, { className: `${CLASS_PREFIX}__file-name`, children: title }) }), _jsx("div", { children: _jsx(Progress, { percent: percent, theme: "default", strokeColor: '#0052D9', className: `${CLASS_PREFIX}__file-progress` }) }), _jsxs("div", { className: `${CLASS_PREFIX}__file-foot`, children: [formType !== 'read' && (_jsxs("div", { children: [_jsxs(Text, { children: [Math.floor(percentSize), "K/"] }), _jsx(Text, { children: size })] })), _jsx(Text, { children: status === 'UPLOAD_STATUS_PENDING' ? '等待上传' : '上传中' })] })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${CLASS_PREFIX}__file-detail`, children: _jsx(Tooltip, { title: title, children: _jsx(Text, { className: `${CLASS_PREFIX}__file-name`, children: title }) }) }), isEdit && (_jsxs("div", { className: `${CLASS_PREFIX}__file-foot`, children: [formType !== 'read' && (_jsx("div", { children: _jsx(Text, { children: size }) })), isEdit && (_jsxs("div", { className: `${CLASS_PREFIX}__file-status`, children: [_jsx(Icon, { type: ((_a = statusMap[status]) === null || _a === void 0 ? void 0 : _a.icon) ||
-                                    statusMap['UPLOAD_STATUS_PENDING'].icon }), _jsx(Text, { className: `${CLASS_PREFIX}__file-status--msg`, children: ((_b = statusMap[status]) === null || _b === void 0 ? void 0 : _b.title) ||
-                                    statusMap['UPLOAD_STATUS_PENDING'].title })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${CLASS_PREFIX}__file-detail`, children: _jsx(Tooltip, { title: title, children: _jsx(Text, { className: `${CLASS_PREFIX}__file-name`, children: title }) }) }), isEdit && (_jsxs("div", { className: `${CLASS_PREFIX}__file-foot`, children: [isEdit && (_jsx("div", { className: `${CLASS_PREFIX}__file-status`, children: _jsx(Text, { className: `${CLASS_PREFIX}__file-status--msg`, children: ((_a = statusMap[status]) === null || _a === void 0 ? void 0 : _a.title) ||
+                                statusMap['UPLOAD_STATUS_PENDING'].title }) })), formType !== 'read' && (_jsx("div", { children: _jsx(Text, { children: size }) }))] }))] }));
 };
 /**
  * 操作列组件, onChange 从最外层 UploadFilePc 传进来
@@ -253,16 +293,16 @@ const UploadFileAction = ({ status = 'UPLOAD_STATUS_PENDING', fileID = '', uuid
             onReLoad === null || onReLoad === void 0 ? void 0 : onReLoad(file);
         } }));
     // 操作列按钮-下载
-    const renderDownLoad = () => (_jsx(Button, { icon: "download", onClick: () => downloadFile(src, title) }));
+    const renderDownLoad = () => (_jsx("a", { download: title, href: src, target: "_blank", rel: "noreferrer", children: _jsx(Button, { icon: "download" }) }));
     switch (status) {
         case 'UPLOAD_STATUS_PENDING':
             return renderCancel();
         case 'UPLOAD_STATUS_LOADING':
             return renderCancel();
         case 'UPLOAD_STATUS_SUCCESS':
-            return (_jsxs(_Fragment, { children: [deleteVisible && renderDelete(), ' ', downloadVisible && !isWebInMiniprogram() && renderDownLoad()] }));
+            return (_jsxs(_Fragment, { children: [downloadVisible && !isWebInMiniprogram() && renderDownLoad(), ' ', deleteVisible && renderDelete()] }));
         case 'UPLOAD_STATUS_ERROR':
-            return (_jsxs(_Fragment, { children: [deleteVisible && renderDelete(), " ", renderReLoad()] }));
+            return (_jsxs(_Fragment, { children: [renderReLoad(), " ", deleteVisible && renderDelete()] }));
         default:
             return null;
     }

package/dist/web/components/form/uploaderFile/uploadFile.pc.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import type { CommonFormPropsType } from '../types';
 import type { unknownFunction } from '../../../types';
+import type { DataType } from '../../../../configs/components/wd-upload-file';
 /**
  * 上传文件 PC 版本
  */
 export declare function UploadFilePc({ layout, id, style, labelVisible, label, requiredFlag, disabled, className, events, decorator, tips, btnTitle, maxUploadCount, maxSize, single, defaultValue, // 组件默认初始化值
 value, // 用于模型组件中 formily 的值管理
-acceptTypes, downloadVisible, deleteVisible, uploadPath, onChange, isEdit, $node, readOnly, }: IUploaderFilePc): JSX.Element;
+acceptTypes, downloadVisible, deleteVisible, uploadPath, onChange, isEdit, $node, readOnly, callbacks, }: IUploaderFilePc): JSX.Element;
 export interface IUploaderFilePc extends CommonFormPropsType {
     btnTitle?: string;
     maxUploadCount?: number;
@@ -22,6 +23,7 @@ export interface IUploaderFilePc extends CommonFormPropsType {
     isEdit?: boolean;
     onChange?: unknownFunction;
     readOnly?: boolean;
+    callbacks?: DataType['callbacks'];
 }
 export interface IUploadFileAction {
     status?: string;