diff --git a/src/config-provider/ConfigContext.tsx b/src/config-provider/ConfigContext.tsx
index 8f091d40..66e822b2 100644
--- a/src/config-provider/ConfigContext.tsx
+++ b/src/config-provider/ConfigContext.tsx
@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+import defaultZhLocale from '../_common/js/global-config/mobile/locale/zh_CN';
 
 export const defaultClassPrefix = 't';
 
@@ -9,10 +10,12 @@ export interface Config {
    * @default 't'
    */
   classPrefix?: string;
+  globalConfig?: typeof defaultZhLocale;
 }
 
 export const defaultContext = {
   classPrefix: defaultClassPrefix,
+  globalConfig: defaultZhLocale,
 };
 
 const ConfigContext = createContext<Config>(defaultContext);
diff --git a/src/upload/Upload.tsx b/src/upload/Upload.tsx
index f3043672..d453c693 100644
--- a/src/upload/Upload.tsx
+++ b/src/upload/Upload.tsx
@@ -1,374 +1,116 @@
-import React, { ChangeEvent, useCallback, useEffect, useRef } from 'react';
-import { AddIcon, CloseIcon, RefreshIcon } from 'tdesign-icons-react';
+import type { MouseEvent } from 'react';
+import React from 'react';
+import { AddIcon, CloseCircleIcon, CloseIcon, LoadingIcon } from 'tdesign-icons-react';
 import classNames from 'classnames';
-import {
-  ProgressContext,
-  RequestMethodResponse,
-  SizeLimitObj,
-  SizeUnit,
-  SizeUnitArray,
-  SuccessContext,
-  TdUploadProps,
-  UploadFile,
-} from './type';
-// eslint-disable-next-line import/no-relative-packages
-import request from '../_common/js/upload/xhr';
-import useDefault from '../_util/useDefault';
-import { StyledProps } from '../common';
-import useConfig from '../_util/useConfig';
-import { TdUploadFile } from '.';
-import { urlCreator, removeProperty, removePropertyAtArray, getNewestUidFactory } from './util';
-
-// upload 工具函数
-const removeUidProperty = (file: TdUploadFile) => removeProperty(file, 'uid');
-const removeUidPropertyAtArray = (fileList: TdUploadFile[]) => removePropertyAtArray(fileList, 'uid');
-const getNewestUid = getNewestUidFactory();
-export interface UploadProps extends TdUploadProps, StyledProps {
-  name?: string;
-}
+import type { TdUploadProps, UploadFile } from './type';
+import type { StyledProps } from '../common';
+import Image from '../image';
+import useUpload from './hooks/useUpload';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
+import useConfig from '../hooks/useConfig';
+import { uploadDefaultProps } from './defaultProps';
+import parseTNode from '../_util/parseTNode';
+
+export interface UploadProps extends TdUploadProps, StyledProps {}
 
 const Upload: React.FC<UploadProps> = (props) => {
-  const {
-    accept,
-    action,
-    method,
-    name,
-    files,
-    defaultFiles,
-    headers,
-    max,
-    multiple,
-    disabled,
-    sizeLimit,
-    withCredentials,
-    className,
-    data,
-    beforeUpload,
-    format,
-    requestMethod,
-    onProgress,
-    onSuccess,
-    onFail,
-    onRemove,
-  } = props;
-  const { classPrefix } = useConfig();
-  const [fileList, onChange] = useDefault<Array<TdUploadFile>, any[]>(files, defaultFiles || [], props.onChange);
-
-  const uploadRef = useRef<HTMLInputElement>();
-
-  const formatFiles = (files: File[] = []): TdUploadFile[] =>
-    files.map((fileRaw) => {
-      const file = typeof format === 'function' ? format(fileRaw) : fileRaw;
-      const uploadFile: TdUploadFile = {
-        raw: fileRaw,
-        lastModified: fileRaw.lastModified,
-        name: fileRaw.name,
-        size: fileRaw.size,
-        type: fileRaw.type,
-        percent: 0,
-        status: 'waiting',
-        url: urlCreator()?.createObjectURL(fileRaw),
-        ...file,
-      };
-      return uploadFile;
+  const rootClassName = usePrefixClass('upload');
+  const { globalConfig } = useConfig();
+  const { onPreview, onClickUpload, addContent, accept, children, className, files, max, multiple, imageProps } =
+    useDefaultProps(props, uploadDefaultProps);
+  const { displayFiles, inputRef, disabled, onNormalFileChange, onInnerRemove } = useUpload(props);
+  const uploadGlobalConfig = globalConfig.upload;
+  const containerClassName = classNames(rootClassName, className);
+
+  const handlePreview = (e: MouseEvent, file: UploadFile, index: number) => {
+    onPreview?.({
+      e: e as MouseEvent<HTMLDivElement>,
+      file,
+      index,
     });
-
-  const getLimitedFiles = (files: Array<TdUploadFile> = []) => {
-    const isSingleMode = !multiple;
-    const mergeLen = files.length + fileList.length;
-    if (isSingleMode) {
-      return files.splice(0, 1);
-    }
-
-    // 限制了最大的张数
-    if (max > 0) {
-      const limitedFiles = mergeLen > max ? files.slice(0, max - mergeLen) : files;
-      return fileList.concat(limitedFiles);
-    }
-
-    return fileList.concat(files);
-  };
-
-  const generateUploadFiles = (files: FileList): TdUploadFile[] => {
-    const uploadList = formatFiles(Array.from(files));
-    return getLimitedFiles(uploadList);
   };
 
-  const handleSizeLimit = (
-    fileSize: number,
-    sizeLimit: UploadProps['sizeLimit'],
-  ): {
-    isExceed: boolean;
-    message: string;
-  } => {
-    const unitArr: SizeUnitArray = ['B', 'KB', 'MB', 'GB'];
-    // 各个单位和 B 的关系
-    const SIZE_MAP = {
-      B: 1,
-      KB: 1024,
-      MB: 1048576, // 1024 * 1024
-      GB: 1073741824, // 1024 * 1024 * 1024
-    };
-    const sizeLimitObj: SizeLimitObj = typeof sizeLimit === 'number' ? { size: sizeLimit, unit: 'KB' } : sizeLimit;
-    // fileSize 的单位为 B
-    sizeLimitObj.unit = sizeLimitObj.unit.toUpperCase() as SizeUnit;
-    if (!unitArr.includes(sizeLimitObj.unit)) {
-      console.warn(`TDesign Upload Warn: \`sizeLimit.unit\` can only be one of ${unitArr.join()}`);
+  const triggerUpload = (e: MouseEvent) => {
+    const input = inputRef.current as HTMLInputElement;
+    if (disabled) {
+      return;
     }
-    return {
-      isExceed: fileSize <= sizeLimitObj.size * SIZE_MAP[sizeLimitObj.unit],
-      message: sizeLimitObj.message,
-    };
-  };
-
-  const isShowAdd = (): boolean => {
-    if (!multiple && fileList.length) return false;
-    if (multiple && max && fileList.length === max) return false;
-    return true;
-  };
-
-  const handleBeforeUpload = useCallback(
-    (file: TdUploadFile): Promise<boolean> => {
-      if (typeof beforeUpload === 'function') {
-        const res = beforeUpload(file);
-        if (res instanceof Promise) return res;
-        return Promise.resolve(res);
-      }
-      if (sizeLimit) {
-        const { isExceed } = handleSizeLimit(file.size, sizeLimit);
-        return Promise.resolve(isExceed);
-      }
-      return Promise.resolve(true);
-    },
-    [beforeUpload, sizeLimit],
-  );
-
-  const handleProgress = useCallback(
-    ({ e, file, percent, type = 'mock' }: ProgressContext) => {
-      const newFileList = [...fileList];
-      const currentFile = newFileList.find((item) => item.uid === (file as TdUploadFile).uid);
-      currentFile.percent = percent;
-      onProgress?.({ e, file: removeUidProperty(currentFile), percent, type });
-      onChange?.(newFileList, { trigger: 'progress' });
-    },
-    [fileList, onProgress, onChange],
-  );
-
-  const handleSuccess = useCallback(
-    ({ e, file, response }: SuccessContext) => {
-      const newFileList = [...fileList];
-      const currentFile = newFileList.find((item) => item.uid === (file as TdUploadFile).uid);
-      currentFile.status = 'success';
-      if (response.url) currentFile.url = response.url;
-      onSuccess?.({
-        e,
-        file: removeUidProperty(currentFile),
-        fileList: removeUidPropertyAtArray(newFileList),
-        response,
-      });
-      onChange?.(newFileList, { trigger: 'success' });
-    },
-    [fileList, onSuccess, onChange],
-  );
-
-  const handleFail = useCallback(
-    (options: { e?: ProgressEvent; file: UploadFile }) => {
-      const { e, file } = options;
-      const newFileList = [...fileList];
-      const currentFile = newFileList.find((item) => item.uid === (file as TdUploadFile).uid);
-      currentFile.status = 'fail';
-      onFail?.({ e, file: removeUidProperty(currentFile) });
-      onChange(newFileList, { trigger: 'fail' });
-    },
-    [fileList, onFail, onChange],
-  );
-
-  const handleRequestMethod = useCallback(
-    async (file: TdUploadFile) => {
-      if (typeof requestMethod !== 'function') {
-        console.error('TDesign Upload Error: `requestMethod` must be a function.');
-        return;
-      }
-      const res: RequestMethodResponse = await requestMethod(removeUidProperty(file));
-      // 验证请求结果
-      if (!res) {
-        console.error('TDesign Upload Error: `requestMethodResponse` is required.');
-        return;
-      }
-      if (!res.status) {
-        console.error(
-          'TDesign Upload Error: `requestMethodResponse.status` is missing, which value is `success` or `fail`',
-        );
-        return;
-      }
-      if (!['success', 'fail'].includes(res.status)) {
-        console.error('TDesign Upload Error: `requestMethodResponse.status` must be `success` or `fail`');
-        return;
-      }
-      if (res.status === 'success' && (!res.response || !res.response.url)) {
-        console.warn(
-          'TDesign Upload Warn: `requestMethodResponse.response.url` is required, when `status` is `success`',
-        );
-      }
-      if (res.status === 'success') {
-        handleSuccess({ file, response: res.response });
-      }
-      if (res.status === 'fail') {
-        handleFail({ file });
-      }
-    },
-    [requestMethod, handleSuccess, handleFail],
-  );
-
-  const handleUpload = useCallback(
-    (uploadFile: TdUploadFile): Promise<void> => {
-      const file = { ...uploadFile };
-      if (file.status !== 'waiting') return;
-      if (!action && !requestMethod) {
-        console.error('TDesign Upload Error: action or requestMethod is required.');
-        return;
-      }
-      file.status = 'progress';
-      if (requestMethod) {
-        return handleRequestMethod(file);
-      }
-      request({
-        action,
-        method,
-        data,
-        file,
-        name,
-        headers,
-        withCredentials,
-        onSuccess: handleSuccess,
-        onProgress: handleProgress,
-        onError: handleFail,
-      });
-    },
-    [
-      requestMethod,
-      action,
-      method,
-      data,
-      name,
-      headers,
-      withCredentials,
-      handleRequestMethod,
-      handleSuccess,
-      handleProgress,
-      handleFail,
-    ],
-  );
-
-  const handleUpLoadFiles = useCallback(
-    (files: TdUploadFile[]) => {
-      files.forEach((file) => {
-        handleBeforeUpload(file).then((canUpload) => {
-          if (canUpload) {
-            // 上传
-            handleUpload(file);
-          }
-        });
-      });
-    },
-    [handleBeforeUpload, handleUpload],
-  );
-
-  const handleUploadChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (disabled) return;
-    const { files } = event.target;
-    const uploadFiles = generateUploadFiles(files);
-    onChange?.(uploadFiles, { trigger: 'upload' });
+    input.click();
+    onClickUpload?.({ e: e as MouseEvent<HTMLDivElement> });
   };
 
-  const handleTriggerUpload = () => {
-    if (disabled) return;
-    uploadRef?.current.click();
-  };
-
-  const handleDeleteFile = (file: TdUploadFile, e) => {
-    const newFileList = [...fileList];
-    const index = newFileList.findIndex((item) => item.uid === file.uid);
-    if (index !== -1) {
-      newFileList.splice(index, 1);
+  const renderStatus = (file: UploadFile) => {
+    if (file.status !== 'fail' && file.status !== 'progress') {
+      return null;
     }
-    onRemove?.({ index, file: removeUidProperty(file), e });
-    onChange?.(newFileList, { trigger: 'delete' });
-  };
-
-  const handleReloadFile = (file: TdUploadFile) => {
-    const newFileList = [...fileList];
-    const currentFile = newFileList.find((item) => item.uid === file.uid);
-    currentFile.percent = 0;
-    currentFile.status = 'waiting';
-    onChange?.(newFileList, { trigger: 'reload' });
+    const renderIcon = () =>
+      file.status === 'progress' ? (
+        <>
+          <LoadingIcon className={`${rootClassName}__progress-loading`} size="24" />
+          <div className={`${rootClassName}__progress-text`}>
+            {file.percent ? `${file.percent}%` : uploadGlobalConfig.progress.uploadingText}
+          </div>
+        </>
+      ) : (
+        <CloseCircleIcon size="24" />
+      );
+    const renderFailText = () =>
+      file.status === 'fail' ? (
+        <div className={`${rootClassName}__progress-text`}>{uploadGlobalConfig.progress.failText}</div>
+      ) : null;
+
+    return (
+      <div className={`${rootClassName}__progress-mask`}>
+        {renderIcon()}
+        {renderFailText()}
+      </div>
+    );
   };
 
-  useEffect(() => {
-    if (fileList && fileList.length) {
-      // 若 fileList 中存在 waiting 状态的文件则触发上传
-      const hasWaitingStatus = fileList.some((file) => file.status === 'waiting');
-      if (hasWaitingStatus) {
-        handleUpLoadFiles(fileList);
-      }
-    }
-  }, [fileList, handleUpLoadFiles]);
-
-  useEffect(() => {
-    // 添加 uid
-    if (fileList && fileList.length) {
-      for (let i = 0; i < fileList.length; i++) {
-        if (!fileList[i].uid) {
-          fileList[i].uid = getNewestUid();
-        }
+  const renderContent = () => {
+    const childNode = parseTNode(children);
+    const addContentNode = parseTNode(addContent, {}, <AddIcon size="28" />);
+    if (max === 0 || (max > 0 && displayFiles.length < max)) {
+      if (childNode) {
+        return <div onClick={triggerUpload}>{childNode}</div>;
       }
+      return (
+        <div className={`${rootClassName}__item ${rootClassName}__item--add`} onClick={triggerUpload}>
+          <div className={`${rootClassName}__add-icon`}>{addContentNode}</div>
+        </div>
+      );
     }
-  }, [fileList]);
-
-  const uploadBaseClassNames = `${classPrefix}-upload`;
+  };
 
-  const uploadClassNames = classNames(uploadBaseClassNames, className);
+  const renderDisplayFiles = () =>
+    displayFiles.map((file, index) => (
+      <div key={index} className={`${rootClassName}__item`}>
+        {file.url ? (
+          <div onClick={(e: MouseEvent) => handlePreview(e, file, index)}>
+            <Image className={`${rootClassName}__image`} shape="round" {...imageProps} src={file.url} />
+          </div>
+        ) : null}
+        {renderStatus(file)}
+        <CloseIcon
+          className={`${rootClassName}__delete-btn`}
+          onClick={(e: MouseEvent) => onInnerRemove({ e: e as MouseEvent<HTMLDivElement>, file, index })}
+        />
+      </div>
+    ));
 
   return (
-    <div className={uploadClassNames}>
-      <ul className={`${uploadBaseClassNames}__card`}>
-        {fileList.map((file, index) => (
-          <li key={index} className={`${uploadBaseClassNames}__card-item`}>
-            <div className={`${uploadBaseClassNames}__card-content ${uploadBaseClassNames}__card-box`}>
-              <span
-                key="delete-icon"
-                className={`${uploadBaseClassNames}__card-delete-item`}
-                onClick={(e) => handleDeleteFile(file, e)}
-              >
-                <CloseIcon className="close-icon" />
-              </span>
-              <img src={file.url} className={`${uploadBaseClassNames}__card-image`} alt={file.name} />
-              {file.status === 'fail' && (
-                <div className={`${uploadBaseClassNames}__card-mask`}>
-                    <RefreshIcon
-                      key="refresh-icon"
-                      size={24}
-                      onClick={() => handleReloadFile(file)} />
-                </div>
-              )}
-            </div>
-          </li>
-        ))}
-        {isShowAdd() ? (
-          <li className={`${uploadBaseClassNames}__card-item`} onClick={() => handleTriggerUpload()}>
-            <div className={`${uploadBaseClassNames}__card-container ${uploadBaseClassNames}__card-box`}>
-              <AddIcon />
-            </div>
-          </li>
-        ) : null}
-      </ul>
+    <div className={containerClassName}>
+      {renderDisplayFiles()}
+      {renderContent()}
       <input
-        ref={uploadRef}
         hidden
+        ref={inputRef}
         type="file"
-        accept={accept}
+        value={files as any}
         multiple={multiple}
-        onChange={(event) => handleUploadChange(event)}
+        accept={accept}
+        onChange={onNormalFileChange}
       />
     </div>
   );
diff --git a/src/upload/_example/base.jsx b/src/upload/_example/base.jsx
deleted file mode 100644
index 8b30912d..00000000
--- a/src/upload/_example/base.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// @ts-ignore
-import React from 'react';
-import { Upload } from 'tdesign-mobile-react';
-
-import './style/index.less';
-
-export default () => {
-  const files = [
-    {
-      url: 'https://tdesign.gtimg.com/site/upload1.png',
-      name: 'uploaded1.png',
-      type: 'image',
-    },
-  ];
-
-  return (
-    <div className="demo-section">
-      <h3 className="demo-section__title">上传图片</h3>
-      <Upload
-        accept="image/png"
-        defaultFiles={files}
-        action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
-      />
-    </div>
-  );
-};
diff --git a/src/upload/_example/base.tsx b/src/upload/_example/base.tsx
new file mode 100644
index 00000000..d75d1c89
--- /dev/null
+++ b/src/upload/_example/base.tsx
@@ -0,0 +1,25 @@
+// @ts-ignore
+import React from 'react';
+import { Message, Upload } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function BaseDemo() {
+  const onValidate = (context: any) => {
+    if (context.type === 'FILE_OVER_SIZE_LIMIT') {
+      Message.warning('文件大小超出限制');
+    }
+  };
+  return (
+    <div className="upload-demo">
+      <h3 className="upload-title">上传图片</h3>
+      <Upload
+        accept="image/png"
+        action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+        max={1}
+        multiple={false}
+        sizeLimit={{ size: 3000000, unit: 'B' }}
+        onValidate={onValidate}
+      />
+    </div>
+  );
+}
diff --git a/src/upload/_example/custom.tsx b/src/upload/_example/custom.tsx
new file mode 100644
index 00000000..a5d0fce0
--- /dev/null
+++ b/src/upload/_example/custom.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Image, Message, Upload } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function CustomDemo() {
+  const onValidate = (context: any) => {
+    if (context.type === 'FILE_OVER_SIZE_LIMIT') {
+      Message.warning('文件大小超出上限');
+    }
+  };
+  return (
+    <div className="upload-demo">
+      <div className="upload-title">请上传身份证人像面</div>
+      <div className="upload-content">
+        <Upload
+          className="front"
+          accept="image/png"
+          action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+          addContent={
+            <div className="add-content">
+              <Image className="content-img" src="https://tdesign.gtimg.com/mobile/demos/upload3.png" alt="" />
+            </div>
+          }
+          defaultFiles={[]}
+          multiple={false}
+          max={1}
+          sizeLimit={{ size: 3000000, unit: 'B' }}
+          onValidate={onValidate}
+        />
+      </div>
+      <div className="upload-title">请上传身份证国徽面</div>
+      <div className="upload-content">
+        <Upload
+          className="reverse"
+          addContent={
+            <div className="add-content">
+              <Image className="content-img" src="https://tdesign.gtimg.com/mobile/demos/upload3.png" alt="" />
+            </div>
+          }
+          accept="image/png"
+          action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+          defaultFiles={[]}
+          multiple={false}
+          max={1}
+          sizeLimit={{ size: 3000000, unit: 'B' }}
+          onValidate={onValidate}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/upload/_example/index.jsx b/src/upload/_example/index.jsx
index 36b0a5d4..5867d93b 100644
--- a/src/upload/_example/index.jsx
+++ b/src/upload/_example/index.jsx
@@ -1,18 +1,26 @@
 import React from 'react';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-import Base from './base';
-import Multiple from './multiple';
+import BaseDemo from './base';
+import MultipleDemo from './multiple';
+import StatusDemo from './status';
+import CustomDemo from './custom';
 
 export default function () {
   return (
     <div className="tdesign-mobile-demo" style={{ marginBottom: 16 }}>
-      <TDemoHeader title="Upload 上传" summary="用于相册读取或拉起拍照的图片上传功能。" />
+      <TDemoHeader title="Upload上传" summary="用于相册读取或拉起拍照的图片上传功能。" />
       <TDemoBlock title="01 类型" summary="单选上传图片">
-        <Base />
+        <BaseDemo />
       </TDemoBlock>
-      <TDemoBlock title="" summary="多选上传图片">
-        <Multiple />
+      <TDemoBlock summary="多选上传图片">
+        <MultipleDemo />
+      </TDemoBlock>
+      <TDemoBlock title="02 组件状态" summary="加载状态">
+        <StatusDemo />
+      </TDemoBlock>
+      <TDemoBlock title="03 样式自定义" summary="单选上传">
+        <CustomDemo />
       </TDemoBlock>
     </div>
   );
diff --git a/src/upload/_example/multiple.jsx b/src/upload/_example/multiple.jsx
deleted file mode 100644
index cd694b30..00000000
--- a/src/upload/_example/multiple.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// @ts-ignore
-import React, { useState } from 'react';
-import { Upload } from 'tdesign-mobile-react';
-
-export default () => {
-  const [files, setFiles] = useState([
-    {
-      url: 'https://tdesign.gtimg.com/site/upload1.png',
-      name: 'uploaded1.png',
-      type: 'image',
-    },
-    {
-      url: 'https://tdesign.gtimg.com/site/upload2.png',
-      name: 'uploaded2.png',
-      type: 'image',
-    },
-    {
-      url: 'https://tdesign.gtimg.com/site/upload1.png',
-      name: 'uploaded3.png',
-      type: 'image',
-      status: 'fail',
-    },
-  ]);
-  const handleRemove = ({ index }) => {
-    setFiles(files.filter((item, idx) => index !== idx));
-  };
-
-  return (
-    <div className="demo-section">
-      <h3 className="demo-section__title">上传图片</h3>
-      <Upload
-        accept="image/jpeg"
-        files={files}
-        action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
-        multiple
-        onRemove={handleRemove}
-      />
-    </div>
-  );
-};
diff --git a/src/upload/_example/multiple.tsx b/src/upload/_example/multiple.tsx
new file mode 100644
index 00000000..d6e56894
--- /dev/null
+++ b/src/upload/_example/multiple.tsx
@@ -0,0 +1,78 @@
+// @ts-ignore
+import type { MouseEvent } from 'react';
+import React, { useState } from 'react';
+import {
+  ProgressContext,
+  SuccessContext,
+  Upload,
+  UploadChangeContext,
+  UploadFailContext,
+  UploadFile,
+  UploadRemoveContext,
+} from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default () => {
+  const [files, setFiles] = useState<UploadFile[]>([
+    {
+      url: 'https://tdesign.gtimg.com/mobile/demos/upload4.png',
+      name: 'uploaded1.png',
+      type: 'image',
+    },
+    {
+      url: 'https://tdesign.gtimg.com/mobile/demos/upload6.png',
+      name: 'uploaded2.png',
+      type: 'image',
+    },
+    {
+      url: 'https://tdesign.gtimg.com/mobile/demos/upload4.png',
+      name: 'uploaded3.png',
+      type: 'image',
+    },
+  ]);
+  const onFail = ({ file, e }: UploadFailContext): any => {
+    console.log('---onFail', file, e);
+    return null;
+  };
+  const onProgress = ({ file, percent, type, e }: ProgressContext) => {
+    console.log('---onProgress:', file, percent, type, e);
+  };
+  const onChange = (files: Array<UploadFile>, { e, response, trigger, index, file }: UploadChangeContext) => {
+    console.log('====onChange', files, e, response, trigger, index, file);
+    setFiles(files);
+  };
+  const onPreview = ({ file, e }: { file: UploadFile; e: MouseEvent }) => {
+    console.log('====onPreview', file, e);
+  };
+  const onSuccess = ({ file, fileList, response, e }: SuccessContext) => {
+    console.log('====onSuccess', file, fileList, e, response);
+  };
+  const onRemove = ({ index, file, e }: UploadRemoveContext) => {
+    console.log('====onRemove', index, file, e);
+  };
+  const onSelectChange = (files: Array<UploadFile>) => {
+    console.log('====onSelectChange', files);
+  };
+  const onClickUpload = ({ e }: { e: MouseEvent }) => {
+    console.log('====onClickUpload', e);
+  };
+  return (
+    <div className="upload-demo">
+      <div className="upload-title">多选上传</div>
+      <Upload
+        multiple
+        action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+        defaultFiles={files}
+        max={10}
+        onFail={onFail}
+        onProgress={onProgress}
+        onChange={onChange}
+        onPreview={onPreview}
+        onSuccess={onSuccess}
+        onRemove={onRemove}
+        onSelectChange={onSelectChange}
+        onClickUpload={onClickUpload}
+      />
+    </div>
+  );
+};
diff --git a/src/upload/_example/status.tsx b/src/upload/_example/status.tsx
new file mode 100644
index 00000000..2e931fb8
--- /dev/null
+++ b/src/upload/_example/status.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import type { UploadFile } from 'tdesign-mobile-react';
+import { Upload } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function StatusDemo() {
+  const files: UploadFile[] = [
+    {
+      url: 'https://tdesign.gtimg.com/mobile/demos/upload6.png',
+      name: 'uploaded1.png',
+      type: 'image',
+      status: 'progress',
+    },
+    {
+      url: 'https://tdesign.gtimg.com/mobile/demos/upload4.png',
+      name: 'uploaded1.png',
+      type: 'image',
+      status: 'progress',
+      percent: 68,
+    },
+  ];
+  const failFiles: UploadFile[] = [
+    {
+      url: 'https://tdesign.gtimg.com/mobile/demos/upload4.png',
+      name: 'uploaded1.png',
+      type: 'image',
+      status: 'fail',
+    },
+  ];
+  return (
+    <>
+      <div className="upload-demo">
+        <div className="upload-title">上传图片</div>
+        <Upload
+          defaultFiles={files}
+          accept="image/png"
+          multiple
+          action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+        />
+      </div>
+      <div className="upload-demo__title">上传失败</div>
+      <div className="upload-demo">
+        <div className="upload-title">上传图片</div>
+        <Upload
+          defaultFiles={failFiles}
+          action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+          multiple
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/upload/_example/style/index.less b/src/upload/_example/style/index.less
index e2253e2d..bcec7734 100644
--- a/src/upload/_example/style/index.less
+++ b/src/upload/_example/style/index.less
@@ -1,12 +1,44 @@
-
-.demo-section {
-  overflow: hidden;
-  background-color: #fff;
-  padding-bottom: 4px;
+.upload-demo {
+  background: var(--bg-color-demo, #fff);
 
   &__title {
-    margin: 12px 16px;
-    color: rgba(0,0,0,0.9);
+    font-size: 14px;
+    margin: 24px 16px 16px;
+    color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
+  }
+
+  .upload-title {
     font-size: 16px;
+    color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
+    padding: 12px 16px 0;
+  }
+
+  .upload-content {
+    --td-upload-width: 343px;
+    --td-upload-height: 200px;
+    --td-upload-grid-columns: 1;
+  }
+
+  .front {
+    --td-upload-background: center / 100% 100% no-repeat url('https://tdesign.gtimg.com/mobile/demos/upload1.png');
+  }
+
+  .reverse {
+    --td-upload-background: center / 100% 100% no-repeat url('https://tdesign.gtimg.com/mobile/demos/upload2.png');
+  }
+
+  .add-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 72px;
+    height: 72px;
+    background: #d9e1ff;
+    border-radius: 50%;
+
+    .content-img {
+      width: 32px;
+      height: 32px;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/upload/defaultProps.ts b/src/upload/defaultProps.ts
new file mode 100644
index 00000000..b25ecdf5
--- /dev/null
+++ b/src/upload/defaultProps.ts
@@ -0,0 +1,20 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdUploadProps } from './type';
+
+export const uploadDefaultProps: TdUploadProps = {
+  allowUploadDuplicateFile: false,
+  autoUpload: true,
+  disabled: undefined,
+  defaultFiles: [],
+  isBatchUpload: false,
+  max: 0,
+  method: 'POST',
+  multiple: false,
+  name: 'file',
+  uploadAllFilesInOneRequest: false,
+  useMockProgress: true,
+  withCredentials: false,
+};
diff --git a/src/upload/hooks/useUpload.ts b/src/upload/hooks/useUpload.ts
new file mode 100644
index 00000000..fdef7633
--- /dev/null
+++ b/src/upload/hooks/useUpload.ts
@@ -0,0 +1,434 @@
+import type { ChangeEvent, MouseEvent } from 'react';
+import { useRef, useState } from 'react';
+import isString from 'lodash/isString';
+import isFunction from 'lodash/isFunction';
+import type { InnerProgressContext, OnResponseErrorContext } from '../../_common/js/upload/types';
+import type {
+  SizeLimitObj,
+  SuccessContext,
+  TdUploadProps,
+  UploadChangeContext,
+  UploadFile,
+  UploadRemoveContext,
+} from '../type';
+import { getFileList, getFileUrlByFileRaw } from '../../_common/js/upload/utils';
+import {
+  formatToUploadFile,
+  getDisplayFiles,
+  getFilesAndErrors,
+  upload,
+  validateFile,
+} from '../../_common/js/upload/main';
+import useDefaultProps from '../../hooks/useDefaultProps';
+import { uploadDefaultProps } from '../defaultProps';
+import useDefault from '../../_util/useDefault';
+
+export type ValidateParams = Parameters<TdUploadProps['onValidate']>[0];
+
+export default function useUpload(props: TdUploadProps) {
+  const {
+    allowUploadDuplicateFile,
+    action,
+    disabled,
+    autoUpload,
+    multiple,
+    files,
+    defaultFiles,
+    max,
+    sizeLimit,
+    headers,
+    method,
+    isBatchUpload,
+    name,
+    uploadAllFilesInOneRequest,
+    mockProgressDuration,
+    withCredentials,
+    useMockProgress,
+    data,
+    beforeUpload,
+    beforeAllFilesUpload,
+    format,
+    formatRequest,
+    formatResponse,
+    requestMethod,
+    onChange,
+    onCancelUpload,
+    onFail,
+    onOneFileFail,
+    onOneFileSuccess,
+    onProgress,
+    onSuccess,
+    onSelectChange,
+    onWaitingUploadFilesChange,
+    onValidate,
+  } = useDefaultProps(props, uploadDefaultProps);
+  const [uploadValue, setUploadValue] = useDefault(files, defaultFiles, onChange);
+  const [isUploading, setUploading] = useState(false);
+  const [toUploadFiles, setToUploadFiles] = useState<UploadFile[]>([]);
+  const [sizeOverLimitMessage, setSizeOverLimitMessage] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const xhrReq = useRef<{ files: UploadFile[]; xhrReq: XMLHttpRequest }[]>([]);
+
+  const displayFiles = getDisplayFiles({
+    multiple,
+    toUploadFiles,
+    uploadValue,
+    autoUpload,
+    isBatchUpload,
+  });
+
+  const uploadFilePercent = ({ file, percent }: { file: UploadFile; percent: number }) => {
+    const index = toUploadFiles.findIndex((item) => item.raw === file.raw);
+    setToUploadFiles((toUploadFiles: UploadFile[]) => {
+      const newUploadFiles = [...toUploadFiles];
+      newUploadFiles[index] = { ...toUploadFiles[index], percent };
+      return newUploadFiles;
+    });
+  };
+
+  const updateFilesProgress = () => {
+    if (!autoUpload) {
+      return;
+    }
+    setToUploadFiles([...toUploadFiles]);
+  };
+
+  const onResponseError = (e: OnResponseErrorContext) => {
+    if (!e || !e.files || !e.files[0]) {
+      return;
+    }
+    const { response, event, files } = e;
+    updateFilesProgress();
+    onOneFileFail?.({
+      e: event,
+      file: files?.[0],
+      currentFiles: files,
+      failedFiles: files,
+      response,
+    });
+    // 单选或多文件替换，需要清空上一次上传成功的文件
+    if (!multiple || isBatchUpload) {
+      setUploadValue([], {
+        trigger: 'progress-fail',
+        e: event,
+        file: files[0],
+      });
+    }
+  };
+
+  // 多文件上传场景，单个文件进度
+  const onResponseProgress = (p: InnerProgressContext) => {
+    const { event, file, files, percent, type, XMLHttpRequest } = p;
+    updateFilesProgress();
+    onProgress?.({
+      e: event,
+      currentFiles: files,
+      file,
+      percent,
+      type,
+      XMLHttpRequest,
+    });
+  };
+
+  // 多文件上传场景，单文件上传成功后
+  const onResponseSuccess = (p: SuccessContext) => {
+    const { e, fileList, response } = p;
+    // 只有多个上传请求同时触发时才需 onOneFileSuccess
+    if (multiple) {
+      updateFilesProgress();
+      onOneFileSuccess?.({
+        e,
+        file: fileList[0],
+        response,
+      });
+    }
+  };
+
+  const t = function <T>(pattern: T, ...args: any[]) {
+    const [data] = args;
+    if (isString(pattern)) {
+      if (!data) return pattern;
+      const regular = /\{\s*([\w-]+)\s*\}/g;
+      return pattern.replace(regular, (match, key) => {
+        if (data) {
+          return String(data[key]);
+        }
+        return '';
+      });
+    }
+    if (isFunction(pattern)) {
+      // 重要：组件的渲染必须存在参数 h，不能移除
+      if (!args.length) {
+        return null;
+      }
+      return pattern(...args);
+    }
+    return '';
+  };
+
+  const getSizeLimitError: (sizeLimitObj: SizeLimitObj) => any = (sizeLimitObj: SizeLimitObj) => {
+    const limit = sizeLimitObj;
+    return limit.message
+      ? t(limit.message, { sizeLimit: limit.size })
+      : `${t('', { sizeLimit: limit.size })} ${limit.unit}`;
+  };
+
+  const handleNotAutoUpload = (toFiles: UploadFile[]) => {
+    const tmpFiles = multiple && isBatchUpload ? uploadValue.concat(toFiles) : toFiles;
+    if (!tmpFiles.length) return;
+    const list = tmpFiles.map(
+      (file) =>
+        new Promise((resolve) => {
+          getFileUrlByFileRaw(file.raw as File).then((url) => {
+            resolve({ ...file, url: file.url || url });
+          });
+        }),
+    );
+    Promise.all(list).then((files) => {
+      setUploadValue(files as UploadFile[], {
+        trigger: 'add',
+        index: uploadValue.length,
+        file: toFiles[0],
+        files: toFiles,
+      });
+    });
+    setToUploadFiles([]);
+  };
+
+  const onFileChange = (files: File[]) => {
+    if (disabled) {
+      return;
+    }
+    const params = { currentSelectedFiles: formatToUploadFile([...files], props.format) };
+    onSelectChange?.([...files], params);
+    validateFile({
+      uploadValue,
+      files: [...files],
+      allowUploadDuplicateFile,
+      max,
+      sizeLimit,
+      isBatchUpload,
+      autoUpload,
+      format,
+      beforeUpload,
+      beforeAllFilesUpload,
+    }).then((args) => {
+      // 自定义全文件校验不通过
+      if (args.validateResult?.type === 'BEFORE_ALL_FILES_UPLOAD') {
+        const params: ValidateParams = { type: 'BEFORE_ALL_FILES_UPLOAD', files: args.files as UploadFile[] };
+        onValidate?.(params);
+        return;
+      }
+      // 文件数量校验不通过
+      if (args.lengthOverLimit) {
+        const params: ValidateParams = { type: 'FILES_OVER_LENGTH_LIMIT', files: args.files as UploadFile[] };
+        onValidate?.(params);
+        if (!(args.files as UploadFile[]).length) return;
+      }
+      // 过滤相同的文件名
+      if (args.hasSameNameFile) {
+        const params: ValidateParams = { type: 'FILTER_FILE_SAME_NAME', files: args.files as UploadFile[] };
+        onValidate?.(params);
+      }
+      // 文件大小校验结果处理（已过滤超出限制的文件）
+      if (args.fileValidateList instanceof Array) {
+        const { sizeLimitErrors, beforeUploadErrorFiles, toFiles } = getFilesAndErrors(
+          args.fileValidateList,
+          getSizeLimitError,
+        );
+        const tmpWaitingFiles = autoUpload ? toFiles : [...toUploadFiles].concat(toFiles);
+        setToUploadFiles(tmpWaitingFiles);
+        // 文件大小处理
+        if (sizeLimitErrors[0]) {
+          setSizeOverLimitMessage(sizeLimitErrors[0]?.file?.response?.error);
+          onValidate?.({
+            type: 'FILE_OVER_SIZE_LIMIT',
+            files: sizeLimitErrors.map((t) => t.file),
+          });
+        } else {
+          setSizeOverLimitMessage('');
+          // 自定义方法 beforeUpload 拦截的文件
+          if (beforeUploadErrorFiles.length) {
+            const params: ValidateParams = { type: 'CUSTOM_BEFORE_UPLOAD', files: beforeUploadErrorFiles };
+            onValidate?.(params);
+          }
+        }
+        // 如果是自动上传
+        if (autoUpload) {
+          uploadFiles(tmpWaitingFiles);
+        } else {
+          handleNotAutoUpload(tmpWaitingFiles);
+        }
+      }
+    });
+
+    // 清空 <input type="file"> 元素的文件，避免出现重复文件无法选择的情况
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  };
+
+  const onNormalFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const fileList = getFileList(e.target.files as FileList);
+    onFileChange?.(fileList);
+  };
+
+  /**
+   * 上传文件。对外暴露方法，修改时需谨慎
+   * @param toFiles 本地上传的文件列表
+   */
+  function uploadFiles(toFiles?: UploadFile[]) {
+    const notUploadedFiles = uploadValue.filter((t) => t.status !== 'success');
+    const files = autoUpload ? toFiles || toUploadFiles : notUploadedFiles;
+    if (!files || !files.length) {
+      return;
+    }
+    setUploading(true);
+    xhrReq.current = [];
+    upload({
+      action,
+      headers,
+      method,
+      name,
+      withCredentials,
+      uploadedFiles: uploadValue,
+      toUploadFiles: files,
+      multiple,
+      isBatchUpload,
+      autoUpload,
+      uploadAllFilesInOneRequest,
+      useMockProgress,
+      data,
+      mockProgressDuration,
+      requestMethod,
+      formatRequest,
+      formatResponse,
+      onResponseProgress,
+      onResponseSuccess,
+      onResponseError,
+      setXhrObject: (xhr) => {
+        if (xhr.files[0]?.raw && xhrReq.current.find((item) => item.files[0]?.raw === xhr.files[0].raw)) {
+          return;
+        }
+        xhrReq.current = xhrReq.current.concat(xhr);
+      },
+    }).then(
+      // 多文件场景时，全量文件完成后
+      ({ status, data, list, failedFiles }) => {
+        setUploading(false);
+        if (status === 'success') {
+          if (autoUpload) {
+            setUploadValue([...(data?.files as UploadFile[])], {
+              trigger: 'add',
+              file: (data?.files as UploadFile[])[0],
+            });
+          }
+          xhrReq.current = [];
+          onSuccess?.({
+            fileList: data?.files,
+            currentFiles: files,
+            file: files[0],
+            // 只有全部请求完成后，才会存在该字段
+            // @ts-ignore
+            results: list?.map((t) => t.data),
+            // 单文件单请求有一个 response，多文件多请求有多个 response
+            response: data?.response || list?.map((t) => t.data?.response),
+            XMLHttpRequest: data?.XMLHttpRequest,
+          });
+        } else if (failedFiles?.[0]) {
+          onFail?.({
+            e: data?.event,
+            file: failedFiles[0],
+            failedFiles,
+            currentFiles: files,
+            response: data?.response,
+            XMLHttpRequest: data?.XMLHttpRequest,
+          });
+        }
+
+        // 非自动上传，文件都在 uploadValue，不涉及 toUploadFiles
+        if (autoUpload) {
+          setToUploadFiles(failedFiles);
+          onWaitingUploadFilesChange?.({ files: failedFiles, trigger: 'uploaded' });
+        }
+      },
+    );
+  }
+
+  function onInnerRemove(p: UploadRemoveContext) {
+    setSizeOverLimitMessage('');
+    p.e.stopPropagation?.();
+    const changePrams: UploadChangeContext = {
+      e: p.e,
+      trigger: 'remove',
+      index: p.index,
+      file: p.file,
+    };
+    // remove all files for batchUpload
+    if (isBatchUpload || !multiple) {
+      setToUploadFiles([]);
+      onWaitingUploadFilesChange?.({ files: [], trigger: 'remove' });
+      setUploadValue([], changePrams);
+    } else if (!autoUpload) {
+      const curUploadValue = [...uploadValue];
+      curUploadValue.splice(p.index, 1);
+      setUploadValue([...curUploadValue], changePrams);
+    } else {
+      // autoUpload 场景下， p.index < uploadValue.length 表示移除已经上传成功的文件；反之表示移除待上传列表文件
+      // eslint-disable-next-line
+      if (p.index < uploadValue.length) {
+        const curUploadValue = [...uploadValue];
+        curUploadValue.splice(p.index, 1);
+        setUploadValue([...curUploadValue], changePrams);
+      } else {
+        const curToUploadFiles = [...toUploadFiles];
+        curToUploadFiles.splice(p.index - uploadValue.length, 1);
+        setToUploadFiles(curToUploadFiles);
+        onWaitingUploadFilesChange?.({ files: [...toUploadFiles], trigger: 'remove' });
+      }
+    }
+    props.onRemove?.(p);
+  }
+
+  const cancelUpload = (context?: { file?: UploadFile; e?: MouseEvent }) => {
+    xhrReq.current?.forEach((item) => {
+      item.xhrReq?.abort();
+    });
+    setUploading(false);
+
+    if (autoUpload) {
+      setToUploadFiles((toUploadFiles) => toUploadFiles.map((item) => ({ ...item, status: 'waiting' })));
+    } else {
+      const newUploadValue = uploadValue.map((item) => {
+        if (item.status !== 'success') {
+          return { ...item, status: 'waiting' };
+        }
+        return item;
+      });
+      setUploadValue(newUploadValue as UploadFile[], { trigger: 'abort' });
+    }
+
+    if (context?.file && !autoUpload) {
+      onInnerRemove?.({ file: context.file, e: context.e as MouseEvent<HTMLElement>, index: 0 });
+    }
+
+    onCancelUpload?.();
+  };
+
+  return {
+    toUploadFiles,
+    uploadValue,
+    displayFiles,
+    sizeOverLimitMessage,
+    isUploading,
+    inputRef,
+    disabled,
+    xhrReq,
+    uploadFilePercent,
+    uploadFiles,
+    onFileChange,
+    onNormalFileChange,
+    onInnerRemove,
+    cancelUpload,
+  };
+}
diff --git a/src/upload/index.ts b/src/upload/index.ts
index 525b5a98..dbc3c9c7 100644
--- a/src/upload/index.ts
+++ b/src/upload/index.ts
@@ -3,7 +3,6 @@ import './style';
 
 export type { UploadProps } from './Upload';
 export * from './type';
-export * from './types';
 
 export const Upload = _Upload;
 export default Upload;
diff --git a/src/upload/style/index.js b/src/upload/style/index.js
index f91323fb..62eeb1db 100644
--- a/src/upload/style/index.js
+++ b/src/upload/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/upload/_index.less';
+import '../../_common/style/mobile/components/upload/v2/_index.less';
diff --git a/src/upload/type.ts b/src/upload/type.ts
index 78bf040d..a00e3386 100644
--- a/src/upload/type.ts
+++ b/src/upload/type.ts
@@ -4,80 +4,92 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode } from '../common';
+import { ImageProps } from '../image';
+import { PlainObject, TNode } from '../common';
 import { MouseEvent } from 'react';
 
-export interface TdUploadProps {
+export interface TdUploadProps<T extends UploadFile = UploadFile> {
   /**
    * 接受上传的文件类型，[查看 W3C示例](https://www.w3schools.com/tags/att_input_accept.asp)，[查看 MDN 示例](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file)
    * @default ''
    */
   accept?: string;
   /**
-   * 上传接口
+   * 上传接口。设接口响应数据为字段 `response`，那么 `response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片或文件
    * @default ''
    */
   action?: string;
   /**
-   * 是否选取文件后自动上传
+   * 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效
+   */
+  addContent?: TNode;
+  /**
+   * 是否允许重复上传相同文件名的文件
+   * @default false
+   */
+  allowUploadDuplicateFile?: boolean;
+  /**
+   * 是否在选择文件后自动发起请求上传文件
    * @default true
    */
   autoUpload?: boolean;
   /**
-   * 上传文件之前的钩子，参数为上传的文件，返回值决定是否上传
+   * 如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。<br/>如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示本次选中的文件不会加入到文件列表中，即不触发 `onChange` 事件
+   */
+  beforeAllFilesUpload?: (file: UploadFile[]) => boolean | Promise<boolean>;
+  /**
+   * 如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。<br/>如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件
    */
-  beforeUpload?: (file: File | UploadFile) => boolean | Promise<boolean>;
+  beforeUpload?: (file: UploadFile) => boolean | Promise<boolean>;
   /**
-   * 触发上传的内容，同 trigger
+   * 非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域
    */
   children?: TNode;
   /**
-   * 上传文件时所需的额外数据
+   * 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段
    */
-  data?: Record<string, any> | ((file: File) => Record<string, any>);
+  data?: Record<string, any> | ((files: UploadFile[]) => Record<string, any>);
   /**
-   * 触发上传的内容，同 trigger
+   * 是否禁用组件
    */
-  default?: TNode;
+  disabled?: boolean;
   /**
-   * 删除图标。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。
+   * 已上传文件列表，同 `value`。TS 类型：`UploadFile`
+   * @default []
    */
-  deleteBtn?: TNode;
+  files?: Array<T>;
   /**
-   * 是否禁用
-   * @default false
+   * 已上传文件列表，同 `value`。TS 类型：`UploadFile`，非受控属性
+   * @default []
    */
-  disabled?: boolean;
+  defaultFiles?: Array<T>;
   /**
-   * 已上传文件列表
+   * 转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效
    */
-  files?: Array<UploadFile>;
+  format?: (file: File) => UploadFile;
   /**
-   * 已上传文件列表，非受控属性
+   * 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名。<br/>也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组
    */
-  defaultFiles?: Array<UploadFile>;
+  formatRequest?: (requestData: { [key: string]: any }) => { [key: string]: any };
   /**
-   * 文件上传前转换文件数据
+   * 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接
    */
-  format?: (file: File) => UploadFile;
+  formatResponse?: (response: any, context: FormatResponseContext) => ResponseType;
   /**
-   * 用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址。
+   * 设置上传的请求头部，`action` 存在时有效
    */
-  formatResponse?: (response: any, context: FormatResponseContext) => ResponseType ;
+  headers?: { [key: string]: string };
   /**
-   * upload组件每行上传图片列数以及图片的宽度和高度
+   * 透传 Image 组件全部属性
    */
-  gridConfig?: {
-  column?: number;
-  width?: number;
-  height?: number;
-};
+  imageProps?: ImageProps;
   /**
-   * 设置上传的请求头部
+   * 多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效
+   * @default false
    */
-  headers?: {[key: string]: string};
+  isBatchUpload?: boolean;
   /**
-   * 用于控制文件上传数量，值为 0 则不限制
+   * 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性
    * @default 0
    */
   max?: number;
@@ -85,31 +97,36 @@ export interface TdUploadProps {
    * HTTP 请求类型
    * @default POST
    */
-  method?: 'POST' | 'GET' | 'PUT' | 'OPTION';
+  method?: 'POST' | 'GET' | 'PUT' | 'OPTIONS' | 'PATCH' | 'post' | 'get' | 'put' | 'options' | 'patch';
+  /**
+   * 模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效
+   */
+  mockProgressDuration?: number;
   /**
-   * 是否支持多选文件
+   * 支持多文件上传
    * @default false
    */
   multiple?: boolean;
   /**
-   * 占位符
-   * @default ''
+   * 文件上传时的名称
+   * @default file
    */
-  placeholder?: string;
+  name?: string;
   /**
-   * 自定义上传方法。返回值 status 表示上传成功或失败，error 表示上传失败的原因，response 表示请求上传成功后的返回数据，response.url 表示上传成功后的图片地址。示例一：`{ status: 'fail', error: '上传失败', response }`。示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`
+   * 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；<br/>`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。<br/>示例一：`{ status: 'fail', error: '上传失败', response }`。<br/>示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。<br/> 示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`
    */
-  requestMethod?: (files: UploadFile) => Promise<RequestMethodResponse>;
+  requestMethod?: (files: UploadFile | UploadFile[]) => Promise<RequestMethodResponse>;
   /**
-   * 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`
+   * 图片文件大小限制，默认单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`
    */
   sizeLimit?: number | SizeLimitObj;
   /**
-   * 触发上传的内容
+   * 是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效
+   * @default false
    */
-  trigger?: string | TNode<TriggerContext>;
+  uploadAllFilesInOneRequest?: boolean;
   /**
-   * 是否显示为模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传
+   * 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传
    * @default true
    */
   useMockProgress?: boolean;
@@ -123,19 +140,31 @@ export interface TdUploadProps {
    */
   onCancelUpload?: () => void;
   /**
-   * 已上传文件列表发生变化时触发
+   * 已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源
    */
-  onChange?: (value: Array<UploadFile>, context: UploadChangeContext) => void;
+  onChange?: (value: Array<T>, context: UploadChangeContext) => void;
   /**
-   * 上传失败后触发
+   * 点击上传区域时触发
    */
-  onFail?: (options: { e: ProgressEvent; file: UploadFile }) => void;
+  onClickUpload?: (context: { e: MouseEvent<HTMLElement> }) => void;
   /**
-   * 点击预览时触发
+   * 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`
    */
-  onPreview?: (options: { file: UploadFile; e: MouseEvent<HTMLDivElement> }) => void;
+  onFail?: (options: UploadFailContext) => void;
   /**
-   * 上传进度变化时触发，真实进度和模拟进度都会触发。type 值为 real 表示真实上传进度，type 值为 mock 表示模拟上传进度
+   * 多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发
+   */
+  onOneFileFail?: (options: UploadFailContext) => void;
+  /**
+   * 单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据
+   */
+  onOneFileSuccess?: (context: Pick<SuccessContext, 'e' | 'file' | 'response' | 'XMLHttpRequest'>) => void;
+  /**
+   * 点击图片预览时触发，文件没有预览
+   */
+  onPreview?: (options: { file: UploadFile; index: number; e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 上传进度变化时触发，真实进度和模拟进度都会触发。<br/>⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。<br/>参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度
    */
   onProgress?: (options: ProgressContext) => void;
   /**
@@ -143,12 +172,27 @@ export interface TdUploadProps {
    */
   onRemove?: (context: UploadRemoveContext) => void;
   /**
-   * 上传成功后触发
+   * 选择文件或图片之后，上传之前，触发该事件
+   */
+  onSelectChange?: (files: File[], context: UploadSelectChangeContext) => void;
+  /**
+   * 上传成功后触发。<br/>`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。<br/>`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。<br />
    */
   onSuccess?: (context: SuccessContext) => void;
+  /**
+   * 文件上传校验结束事件，文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。<br/>注意：如果设置允许上传同名文件，即 `allowUploadDuplicateFile=true`，则不会因为文件重名触发该事件。<br/>结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误（或告警）提示
+   */
+  onValidate?: (context: { type: UploadValidateType; files: UploadFile[] }) => void;
+  /**
+   * 待上传文件列表发生变化时触发。`context.files` 表示事件参数为待上传文件，`context.trigger` 引起此次变化的触发来源
+   */
+  onWaitingUploadFilesChange?: (context: {
+    files: Array<UploadFile>;
+    trigger: 'validate' | 'remove' | 'uploaded';
+  }) => void;
 }
 
-export interface UploadFile {
+export interface UploadFile extends PlainObject {
   /**
    * 上一次变更的时间
    */
@@ -167,9 +211,9 @@ export interface UploadFile {
    */
   raw?: File;
   /**
-   * 上传接口返回的数据
+   * 上传接口返回的数据。`response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片
    */
-  response?: object;
+  response?: { [key: string]: any };
   /**
    * 文件大小
    */
@@ -178,12 +222,17 @@ export interface UploadFile {
    * 文件上传状态：上传成功，上传失败，上传中，等待上传
    * @default ''
    */
-  status?:  'success' | 'fail' | 'progress' | 'waiting';
+  status?: 'success' | 'fail' | 'progress' | 'waiting';
   /**
    * 文件类型
    * @default ''
    */
   type?: string;
+  /**
+   * 上传时间
+   * @default ''
+   */
+  uploadTime?: string;
   /**
    * 文件上传成功后的下载/访问地址
    * @default ''
@@ -193,24 +242,81 @@ export interface UploadFile {
 
 export type ResponseType = { error?: string; url?: string } & Record<string, any>;
 
-export interface FormatResponseContext { file: UploadFile };
+export interface FormatResponseContext {
+  file: UploadFile;
+  currentFiles?: UploadFile[];
+}
 
-export interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; response: { url?: string; [key: string]: any } };
+export interface RequestMethodResponse {
+  status: 'success' | 'fail';
+  error?: string;
+  response: { url?: string; files?: UploadFile[]; [key: string]: any };
+}
 
-export interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string };
+export interface SizeLimitObj {
+  size: number;
+  unit: SizeUnit;
+  message?: string;
+}
 
 export type SizeUnitArray = ['B', 'KB', 'MB', 'GB'];
 
 export type SizeUnit = SizeUnitArray[number];
 
-export interface TriggerContext { dragActive?: boolean; uploadingFile?: UploadFile | Array<UploadFile> };
+export interface UploadChangeContext {
+  e?: MouseEvent<HTMLElement> | ProgressEvent;
+  response?: any;
+  trigger: UploadChangeTrigger;
+  index?: number;
+  file?: UploadFile;
+  files?: UploadFile[];
+}
+
+export type UploadChangeTrigger = 'add' | 'remove' | 'abort' | 'progress-success' | 'progress' | 'progress-fail';
 
-export interface UploadChangeContext { e?: MouseEvent<HTMLDivElement> | ProgressEvent; response?: any; trigger: string; index?: number; file?: UploadFile };
+export interface UploadFailContext {
+  e?: ProgressEvent;
+  failedFiles: UploadFile[];
+  currentFiles: UploadFile[];
+  response?: any;
+  file: UploadFile;
+  XMLHttpRequest?: XMLHttpRequest;
+}
 
-export interface ProgressContext { e?: ProgressEvent; file: UploadFile; percent: number; type: UploadProgressType };
+export interface ProgressContext {
+  e?: ProgressEvent;
+  file?: UploadFile;
+  currentFiles: UploadFile[];
+  percent: number;
+  type: UploadProgressType;
+  XMLHttpRequest?: XMLHttpRequest;
+}
 
 export type UploadProgressType = 'real' | 'mock';
 
-export interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent<HTMLElement | SVGElement> };
+export interface UploadRemoveContext {
+  index?: number;
+  file?: UploadFile;
+  e: MouseEvent<HTMLElement>;
+}
+
+export interface UploadSelectChangeContext {
+  currentSelectedFiles: UploadFile[];
+}
+
+export interface SuccessContext {
+  e?: ProgressEvent;
+  file?: UploadFile;
+  fileList?: UploadFile[];
+  currentFiles?: UploadFile[];
+  response?: any;
+  results?: SuccessContext[];
+  XMLHttpRequest?: XMLHttpRequest;
+}
 
-export interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; response: any };
+export type UploadValidateType =
+  | 'FILE_OVER_SIZE_LIMIT'
+  | 'FILES_OVER_LENGTH_LIMIT'
+  | 'FILTER_FILE_SAME_NAME'
+  | 'BEFORE_ALL_FILES_UPLOAD'
+  | 'CUSTOM_BEFORE_UPLOAD';
diff --git a/src/upload/types.ts b/src/upload/types.ts
deleted file mode 100644
index 10e47a1f..00000000
--- a/src/upload/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { UploadFile } from './type';
-
-export interface TdUploadFile extends UploadFile {
-  // fileList中每个文件的唯一标识
-  uid?: string;
-}
diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md
new file mode 100644
index 00000000..3ddf8708
--- /dev/null
+++ b/src/upload/upload.en-US.md
@@ -0,0 +1,68 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Upload Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+accept | String | - | File types that can be accepted. [W3C](https://www.w3schools.com/tags/att_input_accept.asp)，[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file) | N
+action | String | - | Uploading URL | N
+addContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+allowUploadDuplicateFile | Boolean | false | allow to upload duplicate name files | N
+autoUpload | Boolean | true | post upload request automatically after files being selected | N
+beforeAllFilesUpload | Function | - | before all files upload, return false can stop uploading file。Typescript：`(file: UploadFile[]) => boolean \| Promise<boolean>` | N
+beforeUpload | Function | - | stop one of files to upload。Typescript：`(file: UploadFile) => boolean \| Promise<boolean>` | N
+children | TNode | - | to define upload trigger elements if `draggable=false`, to define drag elements if `draggable=true`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+data | Object | - | extra request data of uploading. `formatRequest` can redefine all request data。Typescript：`Record<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
+disabled | Boolean | undefined | make upload to be disabled | N
+files | Array | [] | Typescript：`Array<T>` | N
+defaultFiles | Array | [] | uncontrolled property。Typescript：`Array<T>` | N
+format | Function | - | to redefine  `UploadFile` data structure。Typescript：`(file: File) => UploadFile` | N
+formatRequest | Function | - | redefine request data。Typescript：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
+formatResponse | Function | - | redefine response data structure。Typescript：`(response: any, context: FormatResponseContext) => ResponseType` `type ResponseType = { error?: string; url?: string } & Record<string, any>` ` interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+headers | Object | - | HTTP Request Header。Typescript：`{[key: string]: string}` | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+isBatchUpload | Boolean | false | make all files to be a whole package, files can only be replaced or deleted together, can not add more files | N
+max | Number | 0 | max count of files limit | N
+method | String | POST | HTTP request method。options: POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N
+mockProgressDuration | Number | - | mock progress duration time. more large files more duration time | N
+multiple | Boolean | false | multiple files uploading | N
+name | String | file | field name of files in upload request data | N
+requestMethod | Function | - | custom upload request method。Typescript：`(files: UploadFile \| UploadFile[]) => Promise<RequestMethodResponse>` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+sizeLimit | Number / Object | - | files size limit。Typescript：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+uploadAllFilesInOneRequest | Boolean | false | uploading all files in one request | N
+useMockProgress | Boolean | true | use mock progress, instead of real progress | N
+withCredentials | Boolean | false | uploading request with cookie | N
+onCancelUpload | Function |  | Typescript：`() => void`<br/>trigger on cancel button click | N
+onChange | Function |  | Typescript：`(value: Array<T>, context: UploadChangeContext) => void`<br/>trigger on uploaded files change。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`<br/><br/>`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail'`<br/> | N
+onClickUpload | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+onFail | Function |  | Typescript：`(options: UploadFailContext) => void`<br/>`response.error` used for error tips, `formatResponse` can format `response`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`<br/> | N
+onOneFileFail | Function |  | Typescript：`(options: UploadFailContext) => void`<br/>trigger on one file upload failed | N
+onOneFileSuccess | Function |  | Typescript：`(context: Pick<SuccessContext, 'e' \| 'file' \| 'response' \| 'XMLHttpRequest'>) => void`<br/>trigger on file uploaded successfully | N
+onPreview | Function |  | Typescript：`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`<br/>trigger on preview elements click | N
+onProgress | Function |  | Typescript：`(options: ProgressContext) => void`<br/>uploading request progress event。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`<br/><br/>`type UploadProgressType = 'real' \| 'mock'`<br/> | N
+onRemove | Function |  | Typescript：`(context: UploadRemoveContext) => void`<br/>trigger on file removed。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`<br/> | N
+onSelectChange | Function |  | Typescript：`(files: File[], context: UploadSelectChangeContext) => void`<br/>trigger after file choose and before upload。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`<br/> | N
+onSuccess | Function |  | Typescript：`(context: SuccessContext) => void`<br/>trigger on all files uploaded successfully。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`<br/> | N
+onValidate | Function |  | Typescript：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`<br/>trigger on length over limit, or trigger on file size over limit。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`<br/> | N
+onWaitingUploadFilesChange | Function |  | Typescript：`(context: { files: Array<UploadFile>, trigger: 'validate' \| 'remove' \| 'uploaded' }) => void`<br/>trigger on waiting upload files changed | N
+
+### UploadFile
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+lastModified | Number | - | \- | N
+name | String | - | \- | N
+percent | Number | - | \- | N
+raw | Object | - | Typescript：`File` | N
+response | Object | - | Typescript：`{ [key: string]: any }` | N
+size | Number | - | \- | N
+status | String | - | Typescript：` 'success' \| 'fail' \| 'progress' \| 'waiting'` | N
+type | String | - | \- | N
+uploadTime | String | - | upload time | N
+url | String | - | \- | N
+`PlainObject` | \- | - | `PlainObject` is not an attribute of UploadFile，it means you can add and attributes to UploadFile, `type PlainObject = {[key: string]: any}`' | N
diff --git a/src/upload/upload.md b/src/upload/upload.md
index eaee976e..0767f258 100644
--- a/src/upload/upload.md
+++ b/src/upload/upload.md
@@ -2,52 +2,67 @@
 
 ## API
 
+
 ### Upload Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 accept | String | - | 接受上传的文件类型，[查看 W3C示例](https://www.w3schools.com/tags/att_input_accept.asp)，[查看 MDN 示例](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file) | N
-action | String | - | 上传接口 | N
-autoUpload | Boolean | true | 是否选取文件后自动上传 | N
-beforeUpload | Function | - | 上传文件之前的钩子，参数为上传的文件，返回值决定是否上传。TS 类型：`(file: File | UploadFile) => boolean | Promise<boolean>` | N
-children | TNode | N | 触发上传的内容，同 trigger
-data | Object | - | 上传文件时所需的额外数据。TS 类型：`Record<string, any> | ((file: File) => Record<string, any>)` | N
-default | String / Slot / Function | - | 触发上传的内容，同 trigger。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-deleteBtn | String / Slot / Function | - | 删除图标。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-disabled | Boolean | false | 是否禁用 | N
-files | Array | - | 已上传文件列表。支持语法糖。TS 类型：`Array<UploadFile>` | N
-defaultFiles | Array | - | 已上传文件列表。非受控属性。TS 类型：`Array<UploadFile>` | N
-format | Function | - | 文件上传前转换文件数据。TS 类型：`(file: File) => UploadFile` | N
-formatResponse | Function | - | 用于格式化文件上传后的响应数据。error 用于显示错误提示，如果 error 值为真，组件会判定为上传失败；url 用于上传文件/图片地址。。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType `。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts) | N
-gridConfig | Object | - | upload组件每行上传图片列数以及图片的宽度和高度。TS 类型：`{column?: number;width?: number;height?: number;}` | N
-headers | Object | - | 设置上传的请求头部。TS 类型：`{[key: string]: string}` | N
-max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
-method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTION | N
-multiple | Boolean | false | 是否支持多选文件 | N
-placeholder | String | - | 占位符 | N
-requestMethod | Function | - | 自定义上传方法。返回值 status 表示上传成功或失败，error 表示上传失败的原因，response 表示请求上传成功后的返回数据，response.url 表示上传成功后的图片地址。示例一：`{ status: 'fail', error: '上传失败', response }`。示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。TS 类型：`(files: UploadFile) => Promise<RequestMethodResponse>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts) | N
-sizeLimit | Number / Object | - | 图片文件大小限制，单位 KB。可选单位有：`'B' | 'KB' | 'MB' | 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number | SizeLimitObj`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts) | N
-trigger | String / Slot / Function | - | 触发上传的内容。TS 类型：`string | TNode<TriggerContext>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts) | N
-useMockProgress | Boolean | true | 是否显示为模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 | N
+action | String | - | 上传接口。设接口响应数据为字段 `response`，那么 `response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片或文件 | N
+addContent | TNode | - | 添加按钮内容。值为空，使用默认图标渲染；值为 slot 则表示使用插槽渲染；其他值无效。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+allowUploadDuplicateFile | Boolean | false | 是否允许重复上传相同文件名的文件 | N
+autoUpload | Boolean | true | 是否在选择文件后自动发起请求上传文件 | N
+beforeAllFilesUpload | Function | - | 如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。<br/>如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示本次选中的文件不会加入到文件列表中，即不触发 `onChange` 事件。TS 类型：`(file: UploadFile[]) => boolean \| Promise<boolean>` | N
+beforeUpload | Function | - | 如果是自动上传模式 `autoUpload=true`，表示单个文件上传之前的钩子函数，若函数返回值为 `false` 则表示不上传当前文件。<br/>如果是非自动上传模式 `autoUpload=false`，函数返回值为 `false` 时表示从上传文件中剔除当前文件。TS 类型：`(file: UploadFile) => boolean \| Promise<boolean>` | N
+children | TNode | - | 非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+data | Object | - | 上传请求所需的额外字段，默认字段有 `file`，表示文件信息。可以添加额外的文件名字段，如：`{file_name: "custom-file-name.txt"}`。`autoUpload=true` 时有效。也可以使用 `formatRequest` 完全自定义上传请求的字段。TS 类型：`Record<string, any> \| ((files: UploadFile[]) => Record<string, any>)` | N
+disabled | Boolean | undefined | 是否禁用组件 | N
+files | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFile`。TS 类型：`Array<T>` | N
+defaultFiles | Array | [] | 已上传文件列表，同 `value`。TS 类型：`UploadFile`。非受控属性。TS 类型：`Array<T>` | N
+format | Function | - | 转换文件 `UploadFile` 的数据结构，可新增或修改 `UploadFile` 的属性，注意不能删除 `UploadFile` 属性。`action` 存在时有效。TS 类型：`(file: File) => UploadFile` | N
+formatRequest | Function | - | 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名。<br/>也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组。TS 类型：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
+formatResponse | Function | - | 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 此函数的返回值 `error` 或 `response.error` 会作为错误文本提醒，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 或 `response.url` 会作为上传成功后的链接。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType` `type ResponseType = { error?: string; url?: string } & Record<string, any>` ` interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+headers | Object | - | 设置上传的请求头部，`action` 存在时有效。TS 类型：`{[key: string]: string}` | N
+imageProps | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+isBatchUpload | Boolean | false | 多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效 | N
+max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制。注意，单文件上传场景，请勿设置 `max` 属性 | N
+method | String | POST | HTTP 请求类型。可选项：POST/GET/PUT/OPTIONS/PATCH/post/get/put/options/patch | N
+mockProgressDuration | Number | - | 模拟进度间隔时间，单位：毫秒，默认：300。由于原始的上传请求，小文件上传进度只有 0 和 100，故而新增模拟进度，每间隔 `mockProgressDuration` 毫秒刷新一次模拟进度。小文件设置小一点，大文件设置大一点。注意：当 `useMockProgress` 为真时，当前设置有效 | N
+multiple | Boolean | false | 支持多文件上传 | N
+name | String | file | 文件上传时的名称 | N
+requestMethod | Function | - | 自定义上传方法。返回值 `status` 表示上传成功或失败；`error` 或 `response.error` 表示上传失败的原因；<br/>`response` 表示请求上传成功后的返回数据，`response.url` 表示上传成功后的图片/文件地址，`response.files` 表示一个请求上传多个文件/图片后的返回值。<br/>示例一：`{ status: 'fail', error: '上传失败', response }`。<br/>示例二：`{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }`。<br/> 示例三：`{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}`。TS 类型：`(files: UploadFile \| UploadFile[]) => Promise<RequestMethodResponse>` `interface RequestMethodResponse { status: 'success' \| 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+sizeLimit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts) | N
+uploadAllFilesInOneRequest | Boolean | false | 是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效 | N
+useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传 | N
 withCredentials | Boolean | false | 上传请求时是否携带 cookie | N
-onCancelUpload | Function |  | 点击「取消上传」时触发。`() => {}` | N
-onChange | Function |  | 已上传文件列表发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。`(value: Array<UploadFile>, context: UploadChangeContext) => {}` | N
-onFail | Function |  | 上传失败后触发。`(options: { e: ProgressEvent; file: UploadFile }) => {}` | N
-onPreview | Function |  | 点击预览时触发。`(options: { file: UploadFile; e: MouseEvent }) => {}` | N
-onProgress | Function |  | 上传进度变化时触发，真实进度和模拟进度都会触发。type 值为 real 表示真实上传进度，type 值为 mock 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。`(options: ProgressContext) => {}` | N
-onRemove | Function |  | 移除文件时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。`(context: UploadRemoveContext) => {}` | N
-onSuccess | Function |  | 上传成功后触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/upload/type.ts)。`(context: SuccessContext) => {}` | N
+onCancelUpload | Function |  | TS 类型：`() => void`<br/>点击「取消上传」时触发 | N
+onChange | Function |  | TS 类型：`(value: Array<T>, context: UploadChangeContext) => void`<br/>已上传文件列表发生变化时触发，`trigger` 表示触发本次的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadChangeContext { e?: MouseEvent \| ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }`<br/><br/>`type UploadChangeTrigger = 'add' \| 'remove' \| 'abort' \| 'progress-success' \| 'progress' \| 'progress-fail'`<br/> | N
+onClickUpload | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击上传区域时触发 | N
+onFail | Function |  | TS 类型：`(options: UploadFailContext) => void`<br/>上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}`<br/> | N
+onOneFileFail | Function |  | TS 类型：`(options: UploadFailContext) => void`<br/>多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发 | N
+onOneFileSuccess | Function |  | TS 类型：`(context: Pick<SuccessContext, 'e' \| 'file' \| 'response' \| 'XMLHttpRequest'>) => void`<br/>单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据 | N
+onPreview | Function |  | TS 类型：`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`<br/>点击图片预览时触发，文件没有预览 | N
+onProgress | Function |  | TS 类型：`(options: ProgressContext) => void`<br/>上传进度变化时触发，真实进度和模拟进度都会触发。<br/>⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。<br/>参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }`<br/><br/>`type UploadProgressType = 'real' \| 'mock'`<br/> | N
+onRemove | Function |  | TS 类型：`(context: UploadRemoveContext) => void`<br/>移除文件时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }`<br/> | N
+onSelectChange | Function |  | TS 类型：`(files: File[], context: UploadSelectChangeContext) => void`<br/>选择文件或图片之后，上传之前，触发该事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }`<br/> | N
+onSuccess | Function |  | TS 类型：`(context: SuccessContext) => void`<br/>上传成功后触发。<br/>`context.currentFiles` 表示当次请求上传的文件（无论成功或失败），`context.fileList` 表示上传成功后的文件，`context.response` 表示上传请求的返回数据。<br/>`context.results` 表示单次选择全部文件上传成功后的响应结果，可以在这个字段存在时提醒用户上传成功或失败。<br />。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }`<br/> | N
+onValidate | Function |  | TS 类型：`(context: { type: UploadValidateType, files: UploadFile[] }) => void`<br/>文件上传校验结束事件，文件数量超出、文件大小超出限制、文件同名、`beforeAllFilesUpload` 返回值为假、`beforeUpload` 返回值为假等场景会触发。<br/>注意：如果设置允许上传同名文件，即 `allowUploadDuplicateFile=true`，则不会因为文件重名触发该事件。<br/>结合 `status` 和 `tips` 可以在组件中呈现不同类型的错误（或告警）提示。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/upload/type.ts)。<br/>`type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' \| 'FILES_OVER_LENGTH_LIMIT' \| 'FILTER_FILE_SAME_NAME' \| 'BEFORE_ALL_FILES_UPLOAD' \| 'CUSTOM_BEFORE_UPLOAD'`<br/> | N
+onWaitingUploadFilesChange | Function |  | TS 类型：`(context: { files: Array<UploadFile>, trigger: 'validate' \| 'remove' \| 'uploaded' }) => void`<br/>待上传文件列表发生变化时触发。`context.files` 表示事件参数为待上传文件，`context.trigger` 引起此次变化的触发来源 | N
 
 ### UploadFile
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 lastModified | Number | - | 上一次变更的时间 | N
 name | String | - | 文件名称 | N
 percent | Number | - | 下载进度 | N
 raw | Object | - | 原始文件对象。TS 类型：`File` | N
-response | Object | - | 上传接口返回的数据 | N
+response | Object | - | 上传接口返回的数据。`response.error` 存在时会判断此次上传失败，并显示错误文本信息；`response.url` 会作为文件上传成功后的地址，并使用该地址显示图片。TS 类型：`{ [key: string]: any }` | N
 size | Number | - | 文件大小 | N
-status | String | - | 文件上传状态：上传成功，上传失败，上传中，等待上传。TS 类型：` 'success' | 'fail' | 'progress' | 'waiting'` | N
+status | String | - | 文件上传状态：上传成功，上传失败，上传中，等待上传。TS 类型：` 'success' \| 'fail' \| 'progress' \| 'waiting'` | N
 type | String | - | 文件类型 | N
+uploadTime | String | - | 上传时间 | N
 url | String | - | 文件上传成功后的下载/访问地址 | N
+`PlainObject` | \- | - | `PlainObject` 不是 UploadFile 中的属性，而表示 UploadFile 本身支持添加任意属性，`type PlainObject = {[key: string]: any}`' | N
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 727169d6..bd0a07be 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -62741,6 +62741,701 @@ exports[`csr snapshot test > csr test src/toast/_example/theme.tsx 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/upload/_example/base.tsx 1`] = `
+<div>
+  <div
+    class="upload-demo"
+  >
+    <h3
+      class="upload-title"
+    >
+      上传图片
+    </h3>
+    <div
+      class="t-upload"
+    >
+      <div
+        class="t-upload__item t-upload__item--add"
+      >
+        <div
+          class="t-upload__add-icon"
+        >
+          <svg
+            class="t-icon t-icon-add"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <input
+        accept="image/png"
+        hidden=""
+        type="file"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/upload/_example/custom.tsx 1`] = `
+<div>
+  <div
+    class="upload-demo"
+  >
+    <div
+      class="upload-title"
+    >
+      请上传身份证人像面
+    </div>
+    <div
+      class="upload-content"
+    >
+      <div
+        class="t-upload front"
+      >
+        <div
+          class="t-upload__item t-upload__item--add"
+        >
+          <div
+            class="t-upload__add-icon"
+          >
+            <div
+              class="add-content"
+            >
+              <div
+                class="t-image t-image--square content-img"
+              >
+                <div
+                  class="t-image__mask"
+                >
+                  <div
+                    class="t-loading t-loading--center"
+                    style="font-size: 20px;"
+                  >
+                    <div
+                      class="t-loading__dots"
+                      style="animation-duration: 800ms; width: 20px; height: 20px;"
+                    >
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/upload3.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <input
+          accept="image/png"
+          hidden=""
+          type="file"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="upload-title"
+    >
+      请上传身份证国徽面
+    </div>
+    <div
+      class="upload-content"
+    >
+      <div
+        class="t-upload reverse"
+      >
+        <div
+          class="t-upload__item t-upload__item--add"
+        >
+          <div
+            class="t-upload__add-icon"
+          >
+            <div
+              class="add-content"
+            >
+              <div
+                class="t-image t-image--square content-img"
+              >
+                <div
+                  class="t-image__mask"
+                >
+                  <div
+                    class="t-loading t-loading--center"
+                    style="font-size: 20px;"
+                  >
+                    <div
+                      class="t-loading__dots"
+                      style="animation-duration: 800ms; width: 20px; height: 20px;"
+                    >
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <img
+                  alt=""
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/upload3.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <input
+          accept="image/png"
+          hidden=""
+          type="file"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/upload/_example/multiple.tsx 1`] = `
+<div>
+  <div
+    class="upload-demo"
+  >
+    <div
+      class="upload-title"
+    >
+      多选上传
+    </div>
+    <div
+      class="t-upload"
+    >
+      <div
+        class="t-upload__item"
+      >
+        <div>
+          <div
+            class="t-image t-image--round t-upload__image"
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading t-loading--center"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                </div>
+              </div>
+            </div>
+            <img
+              class="t-image__img t-image--fit-fill t-image--position-center"
+              src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+            />
+          </div>
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item"
+      >
+        <div>
+          <div
+            class="t-image t-image--round t-upload__image"
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading t-loading--center"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                </div>
+              </div>
+            </div>
+            <img
+              class="t-image__img t-image--fit-fill t-image--position-center"
+              src="https://tdesign.gtimg.com/mobile/demos/upload6.png"
+            />
+          </div>
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item"
+      >
+        <div>
+          <div
+            class="t-image t-image--round t-upload__image"
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading t-loading--center"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                </div>
+              </div>
+            </div>
+            <img
+              class="t-image__img t-image--fit-fill t-image--position-center"
+              src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+            />
+          </div>
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item t-upload__item--add"
+      >
+        <div
+          class="t-upload__add-icon"
+        >
+          <svg
+            class="t-icon t-icon-add"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <input
+        hidden=""
+        multiple=""
+        type="file"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/upload/_example/status.tsx 1`] = `
+<div>
+  <div
+    class="upload-demo"
+  >
+    <div
+      class="upload-title"
+    >
+      上传图片
+    </div>
+    <div
+      class="t-upload"
+    >
+      <div
+        class="t-upload__item"
+      >
+        <div>
+          <div
+            class="t-image t-image--round t-upload__image"
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading t-loading--center"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                </div>
+              </div>
+            </div>
+            <img
+              class="t-image__img t-image--fit-fill t-image--position-center"
+              src="https://tdesign.gtimg.com/mobile/demos/upload6.png"
+            />
+          </div>
+        </div>
+        <div
+          class="t-upload__progress-mask"
+        >
+          <svg
+            class="t-icon t-icon-loading t-upload__progress-loading"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          <div
+            class="t-upload__progress-text"
+          >
+            上传中...
+          </div>
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item"
+      >
+        <div>
+          <div
+            class="t-image t-image--round t-upload__image"
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading t-loading--center"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                </div>
+              </div>
+            </div>
+            <img
+              class="t-image__img t-image--fit-fill t-image--position-center"
+              src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+            />
+          </div>
+        </div>
+        <div
+          class="t-upload__progress-mask"
+        >
+          <svg
+            class="t-icon t-icon-loading t-upload__progress-loading"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+          <div
+            class="t-upload__progress-text"
+          >
+            68%
+          </div>
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item t-upload__item--add"
+      >
+        <div
+          class="t-upload__add-icon"
+        >
+          <svg
+            class="t-icon t-icon-add"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <input
+        accept="image/png"
+        hidden=""
+        multiple=""
+        type="file"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    class="upload-demo__title"
+  >
+    上传失败
+  </div>
+  <div
+    class="upload-demo"
+  >
+    <div
+      class="upload-title"
+    >
+      上传图片
+    </div>
+    <div
+      class="t-upload"
+    >
+      <div
+        class="t-upload__item"
+      >
+        <div>
+          <div
+            class="t-image t-image--round t-upload__image"
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading t-loading--center"
+                style="font-size: 20px;"
+              >
+                <div
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                >
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                </div>
+              </div>
+            </div>
+            <img
+              class="t-image__img t-image--fit-fill t-image--position-center"
+              src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
+            />
+          </div>
+        </div>
+        <div
+          class="t-upload__progress-mask"
+        >
+          <svg
+            class="t-icon t-icon-close-circle"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+              fill="currentColor"
+            />
+          </svg>
+          <div
+            class="t-upload__progress-text"
+          >
+            上传失败
+          </div>
+        </div>
+        <svg
+          class="t-icon t-icon-close t-upload__delete-btn"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-upload__item t-upload__item--add"
+      >
+        <div
+          class="t-upload__add-icon"
+        >
+          <svg
+            class="t-icon t-icon-add"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <input
+        hidden=""
+        multiple=""
+        type="file"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `"<div class="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-right t-avatar-group-offset-right-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user-add" style="font-size:24px"><path fill="currentColor" d="M11.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM19 13v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2zM8 16a4 4 0 00-4 4h8.05v2H2v-2a6 6 0 016-6h4v2H8z"></path></svg></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/avatar/_example/badgeAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:4px;top:4px"></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">8</div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">12</div></div></div></div></div>"`;
@@ -63268,3 +63963,11 @@ exports[`ssr snapshot test > ssr test src/toast/_example/cover.tsx 1`] = `"<div
 exports[`ssr snapshot test > ssr test src/toast/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Toast 轻提示</h1><p class="tdesign-mobile-demo-header__summary">用于轻量级反馈或提示，不会打断用户操作</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础提示</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->纯文本</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->多行文字</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带横向图标</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带竖向图标</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->加载状态</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">内置主题</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->成功提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->警告提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->错误提示</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 显示遮罩</h2><p class="tdesign-mobile-demo-block__summary">弹窗可显示遮罩，禁止滑动和点击</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->禁止滑动和点击</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">04 手动关闭</h2><p class="tdesign-mobile-demo-block__summary">手动关闭轻提示</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->显示提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->关闭提示</span></button></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/toast/_example/theme.tsx 1`] = `"<div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->成功提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->警告提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->错误提示</span></button></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/base.tsx 1`] = `"<div class="upload-demo"><h3 class="upload-title">上传图片</h3><div class="t-upload"><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" accept="image/png"/></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/custom.tsx 1`] = `"<div class="upload-demo"><div class="upload-title">请上传身份证人像面</div><div class="upload-content"><div class="t-upload front"><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><div class="add-content"><div class="t-image t-image--square content-img"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload3.png" alt=""/></div></div></div></div><input type="file" hidden="" accept="image/png"/></div></div><div class="upload-title">请上传身份证国徽面</div><div class="upload-content"><div class="t-upload reverse"><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><div class="add-content"><div class="t-image t-image--square content-img"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload3.png" alt=""/></div></div></div></div><input type="file" hidden="" accept="image/png"/></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/multiple.tsx 1`] = `"<div class="upload-demo"><div class="upload-title">多选上传</div><div class="t-upload"><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload6.png"/></div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" multiple=""/></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/status.tsx 1`] = `"<div class="upload-demo"><div class="upload-title">上传图片</div><div class="t-upload"><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload6.png"/></div></div><div class="t-upload__progress-mask"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-loading t-upload__progress-loading" style="font-size:24"><path fill="currentColor" d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z" fill-opacity="0.9"></path></svg><div class="t-upload__progress-text">上传中...</div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><div class="t-upload__progress-mask"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-loading t-upload__progress-loading" style="font-size:24"><path fill="currentColor" d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z" fill-opacity="0.9"></path></svg><div class="t-upload__progress-text">68%</div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" multiple="" accept="image/png"/></div></div><div class="upload-demo__title">上传失败</div><div class="upload-demo"><div class="upload-title">上传图片</div><div class="t-upload"><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><div class="t-upload__progress-mask"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle" style="font-size:24"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg><div class="t-upload__progress-text">上传失败</div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" multiple=""/></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index ea2a563b..f63cb94d 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -527,3 +527,11 @@ exports[`ssr snapshot test > ssr test src/toast/_example/cover.tsx 1`] = `"<div
 exports[`ssr snapshot test > ssr test src/toast/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Toast 轻提示</h1><p class="tdesign-mobile-demo-header__summary">用于轻量级反馈或提示，不会打断用户操作</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础提示</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->纯文本</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->多行文字</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带横向图标</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->带竖向图标</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->加载状态</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">内置主题</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->成功提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->警告提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->错误提示</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 显示遮罩</h2><p class="tdesign-mobile-demo-block__summary">弹窗可显示遮罩，禁止滑动和点击</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->禁止滑动和点击</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">04 手动关闭</h2><p class="tdesign-mobile-demo-block__summary">手动关闭轻提示</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->显示提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->关闭提示</span></button></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/toast/_example/theme.tsx 1`] = `"<div class="toast-demo"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->成功提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->警告提示</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->错误提示</span></button></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/base.tsx 1`] = `"<div class="upload-demo"><h3 class="upload-title">上传图片</h3><div class="t-upload"><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" accept="image/png"/></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/custom.tsx 1`] = `"<div class="upload-demo"><div class="upload-title">请上传身份证人像面</div><div class="upload-content"><div class="t-upload front"><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><div class="add-content"><div class="t-image t-image--square content-img"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload3.png" alt=""/></div></div></div></div><input type="file" hidden="" accept="image/png"/></div></div><div class="upload-title">请上传身份证国徽面</div><div class="upload-content"><div class="t-upload reverse"><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><div class="add-content"><div class="t-image t-image--square content-img"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload3.png" alt=""/></div></div></div></div><input type="file" hidden="" accept="image/png"/></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/multiple.tsx 1`] = `"<div class="upload-demo"><div class="upload-title">多选上传</div><div class="t-upload"><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload6.png"/></div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" multiple=""/></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/upload/_example/status.tsx 1`] = `"<div class="upload-demo"><div class="upload-title">上传图片</div><div class="t-upload"><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload6.png"/></div></div><div class="t-upload__progress-mask"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-loading t-upload__progress-loading" style="font-size:24"><path fill="currentColor" d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z" fill-opacity="0.9"></path></svg><div class="t-upload__progress-text">上传中...</div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><div class="t-upload__progress-mask"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-loading t-upload__progress-loading" style="font-size:24"><path fill="currentColor" d="M12 2.25a9.75 9.75 0 000 19.5v-2.44A7.31 7.31 0 1119.31 12h2.44A9.75 9.75 0 0012 2.25z" fill-opacity="0.9"></path></svg><div class="t-upload__progress-text">68%</div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" multiple="" accept="image/png"/></div></div><div class="upload-demo__title">上传失败</div><div class="upload-demo"><div class="upload-title">上传图片</div><div class="t-upload"><div class="t-upload__item"><div><div class="t-image t-image--round t-upload__image"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/upload4.png"/></div></div><div class="t-upload__progress-mask"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle" style="font-size:24"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg><div class="t-upload__progress-text">上传失败</div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-upload__delete-btn"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><div class="t-upload__item t-upload__item--add"><div class="t-upload__add-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" style="font-size:28"><path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path></svg></div></div><input type="file" hidden="" multiple=""/></div></div>"`;