20220916 upload

src/form/__tests__/__snapshots__/form.test.tsx.snap

@@ -1942,14 +1942,19 @@ exports[`disabled.jsx 1`] = `
                           </span>
                         </div>
                       </div>
+                      <div
+                        class="t-upload__card-name"
+                      >
+                        avatar.jpg
+                      </div>
                     </li>
                   </ul>
-                  <small
-                    class="t-upload__tips t-size-s"
-                  >
-                    请选择单张图片文件上传
-                  </small>
                 </div>
+                <small
+                  class="t-upload__tips t-size-s"
+                >
+                  请选择单张图片文件上传
+                </small>
               </div>
             </div>
           </div>

src/upload/__tests__/__snapshots__/upload.test.tsx.snap

@@ -549,7 +549,7 @@ exports[`draggable.jsx 1`] = `
                   <small
                     class="t-size-s"
                   >
-                    上传日期：2022-08-27 8:0:0
+                    上传日期：2022-09-25
                   </small>
                   <div
                     class="t-upload__dragger-btns"
@@ -906,49 +906,108 @@ exports[`image.jsx 1`] = `
           class="t-space-item"
         >
           <div
-            class="t-upload"
+            class="t-space t-space-horizontal"
+            style="gap: 16px;"
           >
-            <input
-              accept="image/*"
-              hidden=""
-              type="file"
-            />
-            <div>
-              <ul
-                class="t-upload__card"
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-upload"
               >
-                <li
-                  class="t-upload__card-item t-is-background"
-                >
-                  <div
-                    class="t-upload__card-container t-upload__card-box"
+                <input
+                  accept="image/*"
+                  hidden=""
+                  type="file"
+                />
+                <div>
+                  <ul
+                    class="t-upload__card"
                   >
-                    <svg
-                      class="t-icon t-icon-add"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 16 16"
-                      width="1em"
-                    >
-                      <path
-                        d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-                        fill="currentColor"
-                        fill-opacity="0.9"
-                      />
-                    </svg>
-                    <p
-                      class="t-size-s"
+                    <li
+                      class="t-upload__card-item t-is-background"
                     >
-                      请选择图片
-                    </p>
-                  </div>
-                </li>
-              </ul>
-              <small
-                class="t-upload__tips t-size-s"
+                      <div
+                        class="t-upload__card-container t-upload__card-box"
+                      >
+                        <svg
+                          class="t-icon t-icon-add"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 16 16"
+                          width="1em"
+                        >
+                          <path
+                            d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                            fill="currentColor"
+                            fill-opacity="0.9"
+                          />
+                        </svg>
+                        <p
+                          class="t-size-s"
+                        >
+                          请选择图片
+                        </p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+                <small
+                  class="t-upload__tips t-size-s"
+                >
+                  请选择单张图片文件上传（上传成功状态演示）
+                </small>
+              </div>
+            </div>
+            <div
+              class="t-space-item"
+            >
+              <div
+                class="t-upload"
               >
-                请选择单张图片文件上传
-              </small>
+                <input
+                  accept="image/*"
+                  hidden=""
+                  type="file"
+                />
+                <div>
+                  <ul
+                    class="t-upload__card"
+                  >
+                    <li
+                      class="t-upload__card-item t-is-background"
+                    >
+                      <div
+                        class="t-upload__card-container t-upload__card-box"
+                      >
+                        <svg
+                          class="t-icon t-icon-add"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 16 16"
+                          width="1em"
+                        >
+                          <path
+                            d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                            fill="currentColor"
+                            fill-opacity="0.9"
+                          />
+                        </svg>
+                        <p
+                          class="t-size-s"
+                        >
+                          点击上传图片
+                        </p>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+                <small
+                  class="t-upload__tips t-size-s"
+                >
+                  单张图片文件上传（上传失败状态演示）
+                </small>
+              </div>
             </div>
           </div>
         </div>
@@ -1029,13 +1088,13 @@ exports[`image.jsx 1`] = `
                       </span>
                     </div>
                   </div>
+                  <div
+                    class="t-upload__card-name"
+                  >
+                    default.jpeg
+                  </div>
                 </li>
               </ul>
-              <small
-                class="t-upload__tips t-size-s"
-              >
-                默认已上传文件
-              </small>
             </div>
           </div>
         </div>
@@ -1082,12 +1141,12 @@ exports[`image.jsx 1`] = `
                   </div>
                 </li>
               </ul>
-              <small
-                class="t-upload__tips t-size-s"
-              >
-                允许选择多张图片文件上传，最多只能上传 3 张图片
-              </small>
             </div>
+            <small
+              class="t-upload__tips t-size-s"
+            >
+              允许选择多张图片文件上传，最多只能上传 3 张图片
+            </small>
           </div>
         </div>
       </div>

src/upload/_example/base.jsx

@@ -3,9 +3,9 @@ import { Upload, Space, Radio, Checkbox, Button, MessagePlugin } from 'tdesign-r
 import { CloseIcon } from 'tdesign-icons-react';
 
 export default function UploadExample() {
-  const uploadRef1 = useRef();
-  const uploadRef2 = useRef();
-  const uploadRef3 = useRef();
+  const uploadRef1 = useRef(null);
+  const uploadRef2 = useRef(null);
+  const uploadRef3 = useRef(null);
   const [files1, setFiles1] = useState([]);
   const [files2, setFiles2] = useState([
     {
@@ -87,15 +87,15 @@ export default function UploadExample() {
   // 仅自定义文件列表所需
   // eslint-disable-next-line
   const outsideRemove = (index) => {
-    const tmpFiles = [...files1];
+    const tmpFiles = [...files3];
     tmpFiles.splice(index, 1);
-    setFiles1(tmpFiles);
+    setFiles3(tmpFiles);
   };
 
   // eslint-disable-next-line
-  const fileListDisplay = ({ files }) => (
+  const fileListDisplay = () => (
     <div>
-      {files.map((file, index) => (
+      {files3.map((file, index) => (
         <div key={file.name} className="t-upload__single-display-text t-upload__display-text--margin">
           {file.name}（{file.size} B）
           <CloseIcon className="t-upload__icon-delete" onClick={() => outsideRemove(index)} />
@@ -119,7 +119,19 @@ export default function UploadExample() {
   };
 
   // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
-  const formatResponse = (res) => ({ ...res, error: '上传失败，请重试', url: res.url });
+  const formatResponse = (res) => ({ ...res, error: '上传失败，请重试', url: res?.url });
+
+  /** 单个文件校验方法，示例代码有效，勿删 */
+  // const beforeUpload = (file) => {
+  //   MessagePlugin.error(`文件 ${file.name} 不满足条件`);
+  //   return false;
+  // };
+
+  /** 全部文件一次性校验方法，示例代码有效，勿删 */
+  // const beforeAllFilesUpload = () => {
+  //   MessagePlugin.error(`文件不满足条件`);
+  //   return false;
+  // };
 
   return (
     <Space direction="vertical">
@@ -160,7 +172,10 @@ export default function UploadExample() {
         <Upload
           ref={uploadRef1}
           files={files1}
-          onChange={setFiles1}
+          onChange={(val) => {
+            console.log(val);
+            setFiles1(val);
+          }}
           action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
           placeholder={multiple ? '文件数量不超过 5 个' : '要求文件大小在 1M 以内'}
           multiple={multiple}
@@ -171,7 +186,6 @@ export default function UploadExample() {
           max={5}
           disabled={disabled}
           allowUploadDuplicateFile={true}
-          // fileListDisplay={fileListDisplay}
           // formatRequest={(obj) => ({ ...obj, other: 123 })}
           onSelectChange={handleSelectChange}
           onFail={handleFail}
@@ -191,10 +205,10 @@ export default function UploadExample() {
           uploadAllFilesInOneRequest={uploadInOneRequest}
           isBatchUpload={isBatchUpload}
           triggerButtonProps={{ theme: 'primary', variant: 'base' }}
-          onFail={handleFail}
           placeholder="这是一段没有文件时的占位文本"
           action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
           style={{ marginLeft: '40px' }}
+          onFail={handleFail}
         ></Upload>
 
         {/* formatResponse 可控制上传成功或者失败 */}
@@ -207,11 +221,12 @@ export default function UploadExample() {
           autoUpload={autoUpload}
           uploadAllFilesInOneRequest={uploadInOneRequest}
           isBatchUpload={isBatchUpload}
-          onFail={handleFail}
           formatResponse={formatResponse}
           placeholder="文件上传失败示例"
           action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
           style={{ marginLeft: '60px' }}
+          // fileListDisplay={fileListDisplay}
+          onFail={handleFail}
         />
       </Space>
     </Space>

src/upload/_example/draggable.jsx

@@ -1,9 +1,28 @@
 import React, { useState } from 'react';
 import { Upload, Radio, Switch, Space, MessagePlugin } from 'tdesign-react';
 
+function getCurrentDate(needTime = false) {
+  const d = new Date();
+  let month = d.getMonth() + 1;
+  month = month < 10 ? `0${month}` : month;
+  const date = `${d.getFullYear()}-${month}-${d.getDate()}`;
+  const time = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
+  if (needTime) return [date, time].join(' ')
+  return date;
+}
+
 export default function UploadExample() {
   const [files, setFiles] = useState([]);
-  const [files2, setFiles2] = useState([{ name: '默认文件', url: 'https://tdesign.gtimg.com/site/source/figma-pc.png', status: 'success', size: 1024 }]);
+  const [files2, setFiles2] = useState([{
+    name: '默认文件',
+    url: 'https://tdesign.gtimg.com/site/source/figma-pc.png',
+    status: 'success',
+    size: 1024,
+    // 上传日期，如果接口返回的字段包含 uploadTime，则会以接口返回的为准，默认使用本地电脑时间。
+    // 如果希望使用接口返回的上传日期，但是接口字段名不是 uploadTime，则可以使用函数 formatResponse 格式化接口数据
+    uploadTime: '2022-09-25',
+  }]);
+
   const [autoUpload, setAutoUpload] = React.useState(false);
   const [theme, setTheme] = React.useState('file');
 
@@ -15,28 +34,37 @@ export default function UploadExample() {
     MessagePlugin.success('上传成功');
   };
 
+  // res.url 图片地址；res.uploadTime 文件上传时间；res.error 上传失败的原因
+  const formatResponse = (res) => {
+    // 响应结果添加上传时间字段，用于 UI 显示
+    res.uploadTime = getCurrentDate();
+    return res;
+  }
+
   return (
     <Space direction="vertical">
       <div>
         是否自动上传：
         <Switch value={autoUpload} onChange={setAutoUpload} />
       </div>
-      <Radio.Group defaultValue="file" onChange={(val) => setTheme(val)} variant="default-filled">
+      <Radio.Group defaultValue="file" onChange={setTheme} variant="default-filled">
         <Radio.Button value="file">文件拖拽上传</Radio.Button>
         <Radio.Button value="image">图片拖拽上传</Radio.Button>
       </Radio.Group>
 
       <br />
 
+      {/* 可以使用 trigger 自定义拖拽区域显示的内容 */}
+      {/* <!-- abridgeName 表示省略文件名中间文本，保留两侧。左侧保留的文本数量，右侧保留的文本数量] --> */}
       <Space>
-        {/* 可以使用 trigger 自定义拖拽区域显示的内容 */}
         <Upload
           theme={theme}
           autoUpload={autoUpload}
           data={{ extraData: 123, fileName: 'certificate' }}
           draggable
           action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
           files={files}
+          formatResponse={formatResponse}
           onChange={setFiles}
           onFail={onFail}
           onSuccess={onSuccess}
@@ -49,6 +77,7 @@ export default function UploadExample() {
           draggable
           action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
           files={files2}
+          formatResponse={formatResponse}
           onChange={setFiles2}
           onFail={onFail}
           onSuccess={onSuccess}