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

packages/nutui-taro-demo/package.json

@@ -82,6 +82,8 @@
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
     "react-native": "0.72.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
     "react-transition-group": "^4.4.5"
   },

packages/nutui-taro-demo/yarn.lock

@@ -12267,7 +12267,7 @@ react-devtools-core@^4.27.2:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-dom@^18.3.1:
+react-dom@^18.2.0, react-dom@^18.3.1:
   version "18.3.1"
   resolved "http://registry.m.jd.com/react-dom/download/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
   integrity sha1-wiZdeVEbV9R5s90/36UVNklMXLQ=
@@ -12528,7 +12528,7 @@ [email protected]:
   dependencies:
     loose-envify "^1.1.0"
 
-react@^18.3.1:
+react@^18.2.0, react@^18.3.1:
   version "18.3.1"
   resolved "http://registry.m.jd.com/react/download/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha1-SauJIAnFOTNiW9FrJTP8dUyrKJE=

src/config.json

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

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

@@ -206,7 +206,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'
@@ -238,6 +238,7 @@ test('preview component', () => {
       status: 'success',
       message: '上传成功',
       uid: '12',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
     },
   ]
 
@@ -248,7 +249,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])
@@ -266,9 +266,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,5 @@
 import React from 'react'
-import Taro from '@tarojs/taro'
-import { ScrollView, View } 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'
@@ -13,56 +9,38 @@ import Demo6 from './demos/taro/demo6'
 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'
 
 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',
     },
     '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',
     },
     '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',
@@ -72,39 +50,26 @@ const UploaderDemo = () => {
 
   return (
     <>
-      <Header />
-      <ScrollView
-        className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} bg-w`}
-      >
-        <View className="h2">{translated.basic}</View>
+      <div className="demo bg-w">
+        <h2>{translated.basic}</h2>
         <Demo1 />
-        <View className="h2">{translated.basic}</View>
+        <h2>{translated.uploadStatus}</h2>
         <Demo2 />
-        <View className="h2">{translated.uploadStatus}</View>
+        <h2>{translated.limitedQuantity}</h2>
         <Demo3 />
-        <View className="h2">{translated.uploadListDefault}</View>
+        <h2>{translated.limitSize}</h2>
         <Demo4 />
-        <View className="h2">{translated.uploadDefaultProgress}</View>
+        <h2>{translated.beforeUpload}</h2>
         <Demo5 />
-        <View className="h2">{translated.camera}</View>
+        <h2>{translated.disabled}</h2>
         <Demo6 />
-        <View className="h2">{translated.videoUploader}</View>
+        <h2>{translated.customDeleteIcon}</h2>
         <Demo7 />
-        <View className="h2">{translated.limitedQuantity}</View>
+        <h2>{translated.manualExecution}</h2>
         <Demo8 />
-        <View className="h2">{translated.limitSize}</View>
+        <h2>{translated.uploadListDefault}</h2>
         <Demo9 />
-        <View className="h2">{translated.custom}</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>
+      </div>
     </>
   )
 }

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

src/packages/uploader/demos/h5/demo1.tsx

@@ -1,45 +1,51 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Uploader, Cell } from '@nutui/nutui-react'
 import { Dongdong } from '@nutui/icons-react'
+import { FileItem } from '../../file-item'
 
 const Demo1 = () => {
-  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
-  const onStart = () => {
-    console.log('start触发')
+  const [list, setList] = useState<FileItem[]>([
+    {
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+    },
+  ])
+
+  const uploaderStyle = {
+    marginInlineEnd: '10px',
+    marginBottom: '10px',
+  }
+  function sleep(time: number) {
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, time)
+    })
+  }
+  async function upload(file: File) {
+    await sleep(2000)
+    return {
+      url: URL.createObjectURL(file),
+    }
   }
-  const beforeUpload = async (files: File[]) => {
-    const allowedTypes = ['image/png']
-    const filteredFiles = Array.from(files).filter((file) =>
-      allowedTypes.includes(file.type)
-    )
-    return filteredFiles
+  async function uploadFail(file: File): Promise<FileItem> {
+    await sleep(2000)
+    throw new Error('Fail to upload')
   }
   return (
     <>
-      <Cell style={{ flexWrap: 'wrap', paddingBottom: '0px' }}>
-        <Uploader
-          beforeUpload={beforeUpload}
-          url={uploadUrl}
-          onStart={onStart}
-          style={{
-            marginInlineEnd: '10px',
-            marginBottom: '10px',
-          }}
-          onChange={(v) => {
-            console.log('outer onChange', v)
-          }}
-        />
+      <Cell style={{ flexWrap: 'wrap' }}>
         <Uploader
-          url={uploadUrl}
           uploadLabel="商品主图"
-          onStart={onStart}
-          style={{ marginInlineEnd: '2px', marginBottom: '10px' }}
+          value={list}
+          onChange={setList}
+          upload={(file: File) => upload(file)}
+          style={uploaderStyle}
         />
+        <Uploader style={uploaderStyle} upload={(file: File) => upload(file)} />
         <Uploader
-          url={uploadUrl}
           uploadIcon={<Dongdong />}
-          onStart={onStart}
-          style={{ marginBottom: '10px' }}
+          upload={(file: File) => uploadFail(file)}
+          style={uploaderStyle}
         />
       </Cell>
     </>