feat(upload): update upload demo, alignment mobile vue

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>
+  );
+}

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>
+  );
+}

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>
   );

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>
+  );
+};

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>
+    </>
+  );
+}

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;
+    }
   }
-}
+}

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;