fix: taro save

jdf2e · Oct 24, 2024 · 2983242 · 2983242
1 parent 2334e78
commit 2983242
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 160 deletions.
diff --git a/src/packages/uploader/demo.taro.tsx b/src/packages/uploader/demo.taro.tsx
@@ -9,15 +9,13 @@ 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'
 
 const UploaderDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
       uploadListDefault: '基础用法-上传列表展示',
       uploadStatus: '上传状态',
-      camera: '直接调起摄像头（移动端生效）',
       limitedQuantity: '限制上传数量',
       limitSize: '限制上传大小（每个文件最大不超过50kb）',
       beforeUpload: '自定义上传前的处理',
@@ -29,7 +27,6 @@ const UploaderDemo = () => {
       basic: '基础用法',
       uploadListDefault: '基础用法-上傳列表展示',
       uploadStatus: '上傳狀態',
-      camera: '直接調起攝像頭（移動端生效）',
       limitedQuantity: '限制上傳數量',
       beforeUpload: '自定義上傳前的處理',
       limitSize: '限制上傳大小',
@@ -42,7 +39,6 @@ const UploaderDemo = () => {
       uploadListDefault: 'Basic usage - upload list dispaly',
       uploadStatus: 'Upload status',
       beforeUpload: 'Beforeupload Usage',
-      camera: 'Direct camera up (mobile)',
       limitedQuantity: 'Limit the number of uploads',
       limitSize: 'Limit upload size (maximum 50kb per file)',
       manualExecution:
@@ -69,12 +65,10 @@ const UploaderDemo = () => {
         <Demo6 />
         <h2>{translated.customDeleteIcon}</h2>
         <Demo7 />
-        <h2>{translated.camera}</h2>
-        <Demo8 />
         <h2>{translated.manualExecution}</h2>
-        <Demo9 />
+        <Demo8 />
         <h2>{translated.uploadListDefault}</h2>
-        <Demo10 />
+        <Demo9 />
       </div>
     </>
   )

diff --git a/src/packages/uploader/demos/taro/demo1.tsx b/src/packages/uploader/demos/taro/demo1.tsx
@@ -4,9 +4,12 @@ import { Dongdong } from '@nutui/icons-react-taro'
 import { FileItem } from '../../file-item'
 
 const Demo1 = () => {
+  const demoUrl =
+    'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif'
+
   const [list, setList] = useState<FileItem[]>([
     {
-      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      url: demoUrl,
     },
   ])
 
@@ -23,12 +26,7 @@ const Demo1 = () => {
   }
   async function upload(file: File) {
     await sleep(2000)
-    const blob = new Blob([file], { type: 'image/png' })
-    const url = URL.createObjectURL(blob)
-    console.log(url)
-    return {
-      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
-    }
+    return { url: demoUrl }
   }
   async function uploadFail(file: File): Promise<FileItem> {
     await sleep(2000)

diff --git a/src/packages/uploader/demos/taro/demo10.tsx b/src/packages/uploader/demos/taro/demo10.tsx
diff --git a/src/packages/uploader/demos/taro/demo3.tsx b/src/packages/uploader/demos/taro/demo3.tsx
@@ -3,6 +3,9 @@ import { Uploader, Cell } from '@nutui/nutui-react-taro'
 import { FileItem } from '../../file-item'
 
 const Demo3 = () => {
+  const demoUrl =
+    'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif'
+
   const [list, setList] = useState<FileItem[]>([])
   const uploaderStyle = {
     marginInlineEnd: '10px',
@@ -18,7 +21,7 @@ const Demo3 = () => {
   async function upload(file: File) {
     await sleep(2000)
     return {
-      url: URL.createObjectURL(file),
+      url: demoUrl,
     }
   }
   return (

diff --git a/src/packages/uploader/demos/taro/demo4.tsx b/src/packages/uploader/demos/taro/demo4.tsx
@@ -17,7 +17,7 @@ const Demo4 = () => {
   async function upload(file: File) {
     await sleep(2000)
     return {
-      url: URL.createObjectURL(file),
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
     }
   }
   return (

diff --git a/src/packages/uploader/demos/taro/demo5.tsx b/src/packages/uploader/demos/taro/demo5.tsx
@@ -5,7 +5,6 @@ import { FileItem } from '../../file-item'
 const Demo5 = () => {
   const [list, setList] = useState<FileItem[]>([])
   const beforeUpload = async (files: File[]) => {
-    console.log('bbb')
     const allowedTypes = ['image/png']
     const filteredFiles = Array.from(files).filter((file) =>
       allowedTypes.includes(file.type)
@@ -23,7 +22,7 @@ const Demo5 = () => {
   async function upload(file: File) {
     await sleep(2000)
     return {
-      url: URL.createObjectURL(file),
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
     }
   }
   return (

diff --git a/src/packages/uploader/demos/taro/demo8.tsx b/src/packages/uploader/demos/taro/demo8.tsx
@@ -1,7 +1,13 @@
-import React from 'react'
-import { Uploader, Cell } from '@nutui/nutui-react-taro'
+import React, { useRef } from 'react'
+import { Uploader, Button, Cell } from '@nutui/nutui-react-taro'
+
+interface uploadRefState {
+  submit: () => void
+  clear: () => void
+}
 
 const Demo8 = () => {
+  const uploadRef = useRef<uploadRefState>(null)
   function sleep(time: number) {
     return new Promise<void>((resolve) => {
       setTimeout(() => {
@@ -12,12 +18,38 @@ const Demo8 = () => {
   async function upload(file: File) {
     await sleep(2000)
     return {
-      url: URL.createObjectURL(file),
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
     }
   }
+  const submitUpload = () => {
+    ;(uploadRef.current as uploadRefState).submit()
+  }
+  const clearUpload = () => {
+    ;(uploadRef.current as uploadRefState).clear()
+  }
   return (
-    <Cell style={{ flexWrap: 'wrap' }}>
-      <Uploader capture upload={(file: File) => upload(file)} />
+    <Cell style={{ display: 'flex', flexDirection: 'column' }}>
+      <Uploader
+        maxCount="5"
+        multiple
+        autoUpload={false}
+        ref={uploadRef}
+        upload={(file: File) => upload(file)}
+        style={{ marginBottom: 10 }}
+      />
+      <div>
+        <Button
+          type="success"
+          size="small"
+          onClick={submitUpload}
+          style={{ marginInlineEnd: '10px' }}
+        >
+          执行上传
+        </Button>
+        <Button type="primary" size="small" onClick={clearUpload}>
+          手动清空上传
+        </Button>
+      </div>
     </Cell>
   )
 }

diff --git a/src/packages/uploader/demos/taro/demo9.tsx b/src/packages/uploader/demos/taro/demo9.tsx
@@ -1,13 +1,43 @@
-import React, { useRef } from 'react'
-import { Uploader, Button, Cell } from '@nutui/nutui-react-taro'
-
-interface uploadRefState {
-  submit: () => void
-  clear: () => void
-}
+import React, { useState } from 'react'
+import { Loading, Star } from '@nutui/icons-react'
+import { Uploader, Button } from '@nutui/nutui-react-taro'
+import { FileItem } from '../../file-item'
 
 const Demo9 = () => {
-  const uploadRef = useRef<uploadRefState>(null)
+  const [list, setList] = useState<FileItem[]>([
+    {
+      name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: '上传成功',
+    },
+    {
+      name: '文件2.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: '上传成功',
+    },
+    {
+      name: '文件3.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'error',
+      message: '上传失败',
+      failIcon: <Star style={{ color: 'white' }} />,
+    },
+    {
+      name: '文件444.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'uploading',
+      message: '上传中...',
+    },
+    {
+      name: '文件555.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'uploading',
+      message: '上传中...',
+      loadingIcon: <Loading className="nut-icon-Loading" color="#fff" />,
+    },
+  ])
   function sleep(time: number) {
     return new Promise<void>((resolve) => {
       setTimeout(() => {
@@ -17,40 +47,27 @@ const Demo9 = () => {
   }
   async function upload(file: File) {
     await sleep(2000)
-    return {
-      url: URL.createObjectURL(file),
+    if (Math.random() < 0.5) {
+      return {
+        url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      }
     }
-  }
-  const submitUpload = () => {
-    ;(uploadRef.current as uploadRefState).submit()
-  }
-  const clearUpload = () => {
-    ;(uploadRef.current as uploadRefState).clear()
+    throw new Error('Fail to upload')
   }
   return (
-    <Cell style={{ display: 'flex', flexDirection: 'column' }}>
-      <Uploader
-        maxCount="5"
-        multiple
-        autoUpload={false}
-        ref={uploadRef}
-        upload={(file: File) => upload(file)}
-        style={{ marginBottom: 10 }}
-      />
-      <div>
-        <Button
-          type="success"
-          size="small"
-          onClick={submitUpload}
-          style={{ marginInlineEnd: '10px' }}
-        >
-          执行上传
-        </Button>
-        <Button type="primary" size="small" onClick={clearUpload}>
-          手动清空上传
-        </Button>
-      </div>
-    </Cell>
+    <Uploader
+      upload={(file: File) => upload(file)}
+      value={list}
+      onChange={setList}
+      maxCount="10"
+      multiple
+      previewType="list"
+      style={{ marginBottom: 20 }}
+    >
+      <Button type="success" size="small">
+        上传文件
+      </Button>
+    </Uploader>
   )
 }
 export default Demo9