feat(jdf2e#3151): 为 taro 版本的 uploader 增加粘贴上传的演示。

Author: Jeff-Tian

src/packages/uploader/demo.taro.tsx

@@ -18,6 +18,7 @@ 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 Demo15 from './demos/taro/demo15'
 
 const UploaderDemo = () => {
   const [translated] = useTranslate({
@@ -35,6 +36,7 @@ const UploaderDemo = () => {
       manualExecution: '选中文件后，通过按钮手动执行上传',
       disabled: '禁用状态',
       customDeleteIcon: '自定义删除icon',
+      enablePasteUpload: '启用粘贴上传',
     },
     'zh-TW': {
       basic: '基础用法',
@@ -50,6 +52,7 @@ const UploaderDemo = () => {
       manualExecution: '選取檔後，通過按鈕手動執行上傳',
       disabled: '禁用狀態',
       customDeleteIcon: '自定義刪除icon',
+      enablePasteUpload: '啟用粘貼上傳',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -67,6 +70,7 @@ const UploaderDemo = () => {
         'After selecting Chinese, manually perform the upload via the button',
       disabled: 'Disabled state',
       customDeleteIcon: 'Custom DeleteIcon',
+      enablePasteUpload: 'Enable paste upload',
     },
   })
 
@@ -102,6 +106,8 @@ const UploaderDemo = () => {
         <Demo13 />
         <h2>{translated.customDeleteIcon}</h2>
         <Demo14 />
+        <h2>{translated.enablePasteUpload}</h2>
+        <Demo15 />
       </div>
     </>
   )

src/packages/uploader/demos/taro/demo15.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Uploader } from '@nutui/nutui-react-taro'
+
+const Demo15 = () => {
+  return (
+    <>
+      <Uploader
+        url="https://my-json-server.typicode.com/linrufeng/demo/posts"
+        enablePasteUpload
+        uploadLabel="点击上传或粘贴图片"
+      />
+    </>
+  )
+}
+export default Demo15

src/packages/uploader/uploader.taro.tsx

@@ -5,6 +5,7 @@ import React, {
   PropsWithChildren,
   useRef,
   useEffect,
+  useCallback,
 } from 'react'
 import classNames from 'classnames'
 import Taro, {
@@ -119,6 +120,7 @@ export interface UploaderProps extends BasicComponent {
   beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void
   beforeDelete?: (file: FileItem, files: FileItem[]) => boolean
   onFileItemClick?: (file: FileItem, index: number) => void
+  enablePasteUpload?: boolean
 }
 
 const defaultProps = {
@@ -152,6 +154,7 @@ const defaultProps = {
   beforeDelete: (file: FileItem, files: FileItem[]) => {
     return true
   },
+  enablePasteUpload: false,
 } as UploaderProps
 
 const InternalUploader: ForwardRefRenderFunction<
@@ -202,6 +205,7 @@ const InternalUploader: ForwardRefRenderFunction<
     beforeUpload,
     beforeXhrUpload,
     beforeDelete,
+    enablePasteUpload,
     ...restProps
   } = { ...defaultProps, ...props }
   const [fileList, setFileList] = usePropsValue({
@@ -439,7 +443,7 @@ const InternalUploader: ForwardRefRenderFunction<
           setFileList([...fileList, ...results])
         }
 
-        reader.readAsDataURL(file as unknown as Blob)
+        reader.readAsDataURL(file.originalFileObj ?? (file as unknown as Blob))
       } else {
         executeUpload(fileItem, index)
         results.push(fileItem)
@@ -520,6 +524,62 @@ const InternalUploader: ForwardRefRenderFunction<
     onFileItemClick?.(file, index)
   }
 
+  const handlePaste = useCallback(
+    (event: ClipboardEvent) => {
+      if (!enablePasteUpload || disabled) return
+
+      const clipboardData = event.clipboardData
+      if (!clipboardData) return
+
+      const files: TFileType[] = []
+
+      if (clipboardData?.items && clipboardData.items.length) {
+        for (let i = 0; i < clipboardData.items.length; i++) {
+          const item = clipboardData.items[i]
+          if (item.kind === 'file' && item.type.startsWith('image/')) {
+            const file = item.getAsFile()
+            if (file) {
+              files.push({
+                originalFileObj: file,
+                size: file.size,
+                path: '',
+                tempFilePath: '',
+                type: file.type,
+                fileType: file.type,
+              })
+            }
+          }
+        }
+      } else if (clipboardData?.files && clipboardData.files.length) {
+        for (let i = 0; i < clipboardData.files.length; i++) {
+          const file = clipboardData.files[i]
+          if (file.type.startsWith('image/')) {
+            files.push(file)
+          }
+        }
+      }
+
+      if (files.length) {
+        readFile(files)
+      }
+    },
+    [enablePasteUpload, disabled, beforeUpload, filterFiles, readFile, onChange]
+  )
+
+  useEffect(() => {
+    fileListRef.current = fileList
+
+    if (enablePasteUpload) {
+      document.addEventListener('paste', handlePaste)
+    }
+
+    return () => {
+      if (enablePasteUpload) {
+        document.removeEventListener('paste', handlePaste)
+      }
+    }
+  }, [fileList, enablePasteUpload, handlePaste])
+
   return (
     <div className={classes} {...restProps}>
       {(children || previewType === 'list') && (