refactor(uploader): Upoader 3.0 重构 & 多端适配

migrate-from-v2.md

@@ -525,23 +525,15 @@ plugins: [
 
 #### Uploader
 
-- `maximize` 重命名为 `maxFileSize`
-- `maximum` 重命名为 `maxCount`
-- `listType ` 重命名为 `previewType`
-- `isDeletable ` 重命名为 `deletable`
-- `isPreview` 重命名为 ` preview`
-- `defaultImg` 重命名为 ` previewUrl`
-- `defaultFileList` 重命名为 ` defaultValue`
-- `uploadIconTip` 重命名为 `uploadLabel`，类型变更为 `ReactNode`
-- `onBeforeUpload` 重命名为 `beforeUpload`
-- `onBeforeXhrUpload` 重命名为 `beforeXhrUpload`
-- `onBeforeDelete` 重命名为 `beforeDelete`
-- `onRemove` 重命名为 `onDelete`
-- 增加 `fit`，用于图片填充模式
-- 增加 `value`，用于受控传值
-- 移除 `uploadIconSize`，可通过 icon 属性传入自定义 icon 或借助 CSS Variables 修改 icon 大小
-- `uploadIcon` 类型从 `string` 调整为 `ReactNode`
-- `onChange` 参数类型从 `{fileList: FileItem[], event: any}` 调整为 `FileItem[]`
+- 移除了组件内部关于ajax相关网络逻辑的处理
+- 移除了`url`、`headers`、`data`、`xhrState`、`withCredentials`、`timeout` 网络配置相关props
+- 移除了`onStart`、`onProgress`、`onFailure`、`beforeXhrUpload` 触发时机函数相关props
+- 新增`onOverCount`属性，文件数量超过限制时触发
+- 新增`onUploadQueueChange`属性，图片上传队列变化时触发
+- 简化`FileItem`类型的使用，除url外其他属性变为可选
+- 调整多选状态下`maxCount`属性的默认值为`Number.MAX_VALUE`
+- 新增了的 `upload` 方法
+- `defaultValue` 和 `value` 的类型从 `FileType` 变更为 `FileItem`
 
 ### 操作反馈
 

src/config.json

@@ -700,7 +700,7 @@
           "author": "VickyYe"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Uploader",
           "type": "component",
           "tarodoc": true,

src/packages/uploader/__tests__/uploader.spec.tsx

@@ -73,7 +73,6 @@ test('should render base uploader other props', () => {
       <Uploader
         deletable
         defaultValue={defaultFileList}
-        headers={{}}
         multiple
         preview
         uploadIcon="dongdong"
@@ -200,7 +199,7 @@ test('before-delete prop return true', () => {
 })
 
 test('ready file list', () => {
-  const list = new FileItem()
+  const list: any = {}
   list.name = '文件1.png'
   list.url =
     'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif'
@@ -232,6 +231,7 @@ test('preview component', () => {
       status: 'success',
       message: '上传成功',
       uid: '12',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
     },
   ]
 
@@ -242,7 +242,6 @@ test('preview component', () => {
       deletable
       onDeleteItem={delFunc}
       handleItemClick={clickFunc}
-      previewUrl="https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif"
     />
   )
   fireEvent.click(container.querySelectorAll('.close')[0])
@@ -260,9 +259,7 @@ test('preview component', () => {
       handleItemClick={clickFunc}
     />
   )
-  fireEvent.click(
-    container1.querySelectorAll('.nut-uploader-preview-img-file-name')[0]
-  )
+  fireEvent.click(container1.querySelectorAll('.nut-uploader-preview-img-c')[0])
   expect(clickFunc).toBeCalled()
 
   const { container: container2 } = render(

src/packages/uploader/demo.taro.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { ScrollView, View } from '@tarojs/components'
+import { View, ScrollView } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import Header from '@/sites/components/header'
-
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
@@ -14,96 +12,76 @@ import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
-import Demo11 from './demos/taro/demo11'
-import Demo12 from './demos/taro/demo12'
-import Demo13 from './demos/taro/demo13'
-import Demo14 from './demos/taro/demo14'
+import Header from '@/sites/components/header'
 
 const UploaderDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       uploadListDefault: '基础用法-上传列表展示',
-      uploadDefaultProgress: '自定义上传使用默认进度条',
       uploadStatus: '上传状态',
-      camera: '直接调起摄像头（移动端生效）',
-      limitedQuantity: '限制上传数量5个',
+      limitedQuantity: '限制上传数量',
       limitSize: '限制上传大小（每个文件最大不超过50kb）',
-      videoUploader: '使用前摄像头拍摄3s视频并上传(仅支持微信小程序)',
-      custom: '自定义数据 FormData、headers',
-      uploadXhrCustom: '自定义 Taro.uploadFile 上传方式(before-xhr-upload)',
+      beforeUpload: '自定义上传前的处理',
       manualExecution: '选中文件后，通过按钮手动执行上传',
       disabled: '禁用状态',
       customDeleteIcon: '自定义删除icon',
+      camera: '直接调起摄像头（移动端生效）',
     },
     'zh-TW': {
       basic: '基础用法',
       uploadListDefault: '基础用法-上傳列表展示',
-      uploadDefaultProgress: '自定義上傳使用默認進度條',
       uploadStatus: '上傳狀態',
-      camera: '直接調起攝像頭（移動端生效）',
-      limitedQuantity: '限制上傳數量5個',
-      limitSize: '限制上傳大小（每個檔案最大不超過50kb）',
-      videoUploader: '使用前鏡頭拍攝3s影片並上傳(僅支援微信小程式)',
-      custom: '自定義數據 FormData、headers',
-      uploadXhrCustom: '自定義 Taro.uploadFile 上傳方式(before-xhr-upload)',
+      limitedQuantity: '限制上傳數量',
+      beforeUpload: '自定義上傳前的處理',
+      limitSize: '限制上傳大小',
       manualExecution: '選取檔後，通過按鈕手動執行上傳',
       disabled: '禁用狀態',
       customDeleteIcon: '自定義刪除icon',
+      camera: '直接調起攝像頭（移動端生效）',
     },
     'en-US': {
       basic: 'Basic usage',
       uploadListDefault: 'Basic usage - upload list dispaly',
-      uploadDefaultProgress: 'Custom upload uses default progress bar',
       uploadStatus: 'Upload status',
-      camera: 'Direct camera up (mobile)',
-      limitedQuantity: 'Limit the number of uploads to 5',
+      beforeUpload: 'Beforeupload Usage',
+      limitedQuantity: 'Limit the number of uploads',
       limitSize: 'Limit upload size (maximum 50kb per file)',
-      videoUploader:
-        'Use the front camera to shoot 3s video and upload it (only support wechat mini program)',
-      custom: 'Custom data FormData, headers',
-      uploadXhrCustom: 'Custom xhr Taro.uploadFile method (before-xhr-upload)',
       manualExecution:
         'After selecting Chinese, manually perform the upload via the button',
       disabled: 'Disabled state',
       customDeleteIcon: 'Custom DeleteIcon',
+      camera: 'Direct camera up (mobile)',
     },
   })
 
   return (
     <>
       <Header />
       <ScrollView
-        className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} bg-w`}
+        className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} padding`}
       >
+        {' '}
         <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <View className="h2">{translated.basic}</View>
-        <Demo2 />
         <View className="h2">{translated.uploadStatus}</View>
+        <Demo2 />
+        <View className="h2">{translated.limitedQuantity}</View>
         <Demo3 />
-        <View className="h2">{translated.uploadListDefault}</View>
+        <View className="h2">{translated.limitSize}</View>
         <Demo4 />
-        <View className="h2">{translated.uploadDefaultProgress}</View>
+        <View className="h2">{translated.beforeUpload}</View>
         <Demo5 />
-        <View className="h2">{translated.camera}</View>
+        <View className="h2">{translated.disabled}</View>
         <Demo6 />
-        <View className="h2">{translated.videoUploader}</View>
+        <View className="h2">{translated.customDeleteIcon}</View>
         <Demo7 />
-        <View className="h2">{translated.limitedQuantity}</View>
+        <View className="h2">{translated.camera}</View>
         <Demo8 />
-        <View className="h2">{translated.limitSize}</View>
+        <View className="h2">{translated.manualExecution}</View>
         <Demo9 />
-        <View className="h2">{translated.custom}</View>
+        <View className="h2">{translated.uploadListDefault}</View>
         <Demo10 />
-        <View className="h2">{translated.uploadXhrCustom}</View>
-        <Demo11 />
-        <View className="h2">{translated.manualExecution}</View>
-        <Demo12 />
-        <View className="h2">{translated.disabled}</View>
-        <Demo13 />
-        <h2>{translated.customDeleteIcon}</h2>
-        <Demo14 />
       </ScrollView>
     </>
   )

src/packages/uploader/demo.tsx

@@ -11,54 +11,41 @@ import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
 import Demo9 from './demos/h5/demo9'
 import Demo10 from './demos/h5/demo10'
-import Demo11 from './demos/h5/demo11'
-import Demo12 from './demos/h5/demo12'
-import Demo13 from './demos/h5/demo13'
-import Demo14 from './demos/h5/demo14'
 
 const UploaderDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       uploadListDefault: '基础用法-上传列表展示',
-      uploadDefaultProgress: '自定义上传使用默认进度条',
       uploadStatus: '上传状态',
       camera: '直接调起摄像头（移动端生效）',
-      limitedQuantity: '限制上传数量5个',
+      limitedQuantity: '限制上传数量',
       limitSize: '限制上传大小（每个文件最大不超过50kb）',
-      compress: '图片压缩（在beforeupload钩子中处理）',
-      custom: '自定义数据 FormData、headers',
-      uploadXhrCustom: '自定义 xhr 上传方式(before-xhr-upload)',
+      beforeUpload: '自定义上传前的处理',
       manualExecution: '选中文件后，通过按钮手动执行上传',
       disabled: '禁用状态',
       customDeleteIcon: '自定义删除icon',
     },
     'zh-TW': {
       basic: '基础用法',
       uploadListDefault: '基础用法-上傳列表展示',
-      uploadDefaultProgress: '自定義上傳使用默認進度條',
       uploadStatus: '上傳狀態',
       camera: '直接調起攝像頭（移動端生效）',
-      limitedQuantity: '限制上傳數量5個',
-      limitSize: '限制上傳大小（每個檔案最大不超過50kb）',
-      compress: '圖片壓縮（在beforeupload鉤子中處理）',
-      custom: '自定義數據 FormData、headers',
-      uploadXhrCustom: '自定義 xhr 上傳方式(before-xhr-upload)',
+      limitedQuantity: '限制上傳數量',
+      beforeUpload: '自定義上傳前的處理',
+      limitSize: '限制上傳大小',
       manualExecution: '選取檔後，通過按鈕手動執行上傳',
       disabled: '禁用狀態',
       customDeleteIcon: '自定義刪除icon',
     },
     'en-US': {
       basic: 'Basic usage',
       uploadListDefault: 'Basic usage - upload list dispaly',
-      uploadDefaultProgress: 'Custom upload uses default progress bar',
       uploadStatus: 'Upload status',
+      beforeUpload: 'Beforeupload Usage',
       camera: 'Direct camera up (mobile)',
-      limitedQuantity: 'Limit the number of uploads to 5',
+      limitedQuantity: 'Limit the number of uploads',
       limitSize: 'Limit upload size (maximum 50kb per file)',
-      compress: 'Image compression (handled in a foreupload hook)',
-      custom: 'Custom data FormData, headers',
-      uploadXhrCustom: 'Custom xhr upload method (before-xhr-upload)',
       manualExecution:
         'After selecting Chinese, manually perform the upload via the button',
       disabled: 'Disabled state',
@@ -71,32 +58,24 @@ const UploaderDemo = () => {
       <div className="demo bg-w">
         <h2>{translated.basic}</h2>
         <Demo1 />
-        <h2>{translated.basic}</h2>
-        <Demo2 />
         <h2>{translated.uploadStatus}</h2>
+        <Demo2 />
+        <h2>{translated.limitedQuantity}</h2>
         <Demo3 />
-        <h2>{translated.uploadListDefault}</h2>
+        <h2>{translated.limitSize}</h2>
         <Demo4 />
-        <h2>{translated.uploadDefaultProgress}</h2>
+        <h2>{translated.beforeUpload}</h2>
         <Demo5 />
-        <h2>{translated.camera}</h2>
+        <h2>{translated.disabled}</h2>
         <Demo6 />
-        <h2>{translated.limitedQuantity}</h2>
+        <h2>{translated.customDeleteIcon}</h2>
         <Demo7 />
-        <h2>{translated.limitSize}</h2>
+        <h2>{translated.camera}</h2>
         <Demo8 />
-        <h2>{translated.compress}</h2>
+        <h2>{translated.manualExecution}</h2>
         <Demo9 />
-        <h2>{translated.custom}</h2>
+        <h2>{translated.uploadListDefault}</h2>
         <Demo10 />
-        <h2>{translated.uploadXhrCustom}</h2>
-        <Demo11 />
-        <h2>{translated.manualExecution}</h2>
-        <Demo12 />
-        <h2>{translated.disabled}</h2>
-        <Demo13 />
-        <h2>{translated.customDeleteIcon}</h2>
-        <Demo14 />
       </div>
     </>
   )