feat: upload support img size limit (#102)

jd-opensource · Jan 5, 2022 · acbd278 · acbd278
1 parent e388b6b
commit acbd278
Show file tree

Hide file tree

Showing 5 changed files with 287 additions and 12 deletions.
diff --git a/examples/form-generator/src/App/schema.js b/examples/form-generator/src/App/schema.js
@@ -62,6 +62,22 @@
 //       ],
 //       fieldKey: 'array_dk_fFn',
 //     },
+//     {
+//       validateTime: 'submit',
+//       type: 'object',
+//       title: '上传组件',
+//       ui: {
+//         type: 'uploader',
+//         listType: 'picture',
+//         canDrag: false,
+//         action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+//         dimension: {
+//           width: 516,
+//           height: 238,
+//         },
+//       },
+//       fieldKey: 'uploader_Ux8m6P',
+//     },
 //   ],
 // }
 

diff --git a/examples/form-generator/vite.config.js b/examples/form-generator/vite.config.js
@@ -17,6 +17,9 @@ var baseConfig = {
   },
   server: {
     port: 2002,
+    proxy: {
+      '/v2': 'https://www.mocky.io/',
+    },
   },
 }
 

diff --git a/packages/drip-form-theme-antd/src/UploaderField/index.tsx b/packages/drip-form-theme-antd/src/UploaderField/index.tsx
@@ -2,17 +2,18 @@
  * @Author: jiangxiaowei
  * @Date: 2020-05-14 13:33:14
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-12-29 19:27:52
+ * @Last Modified time: 2022-01-05 18:10:22
  */
 import React, { memo, useEffect, FC } from 'react'
 import { useImmer as useState } from 'use-immer'
 import { Upload, Button } from 'antd'
 import { UploadOutlined, PlusOutlined, InboxOutlined } from '@ant-design/icons'
 import { useField, useEventCallback, usePrevious } from '@jdfed/hooks'
-import { binaryData2Blob, isEmpty } from '@jdfed/utils'
+import { binaryData2Blob, isEmpty, checkImg } from '@jdfed/utils'
 import './index.styl'
-const { Dragger } = Upload
+const { Dragger, LIST_IGNORE } = Upload
 import { CommonProps } from '../global'
+import type { UploadProps } from 'antd'
 import type { Map } from '@jdfed/utils'
 
 export type UploaderFileType = {
@@ -37,19 +38,36 @@ type UploaderFieldProps = CommonProps &
     canDrag: boolean
     customUpload: (...args: any[]) => Promise<any>
     // 使用action上传完成后的处理
-    afterAction?: (value: { file?: any; fileList?: any }) => {
+    afterAction: (value: { file?: any; fileList?: any }) => {
       file: any
       fileList: any
     }
     // 针对京东图片服务的配置
-    jdAction?: {
+    jdAction: {
       // 上传的地址，具体参考：drip-design例子
       action: string
       // 拼接在返回值之前的域名，可自定义，具体参考：drip-design例子
       domain?: string
       // 图片服务对应的jsf业务名
       jfsBusinessName: string
     }
+    // 尺寸限制
+    dimension: Partial<{
+      width: number
+      height: number
+      minWidth: number
+      minHeight: number
+      maxWidth: number
+      maxHeight: number
+      widthDivisor: number
+      heightDivisor: number
+      widthHeightEqual: boolean
+    }>
+    // 大小限制
+    size: Partial<{
+      max: number
+      min: number
+    }>
   }>
 
 const UploaderField: FC<UploaderFieldProps> = ({
@@ -67,6 +85,8 @@ const UploaderField: FC<UploaderFieldProps> = ({
   afterAction,
   getKey,
   jdAction,
+  dimension,
+  size,
   ...restProps
 }) => {
   const [initValue, setValue] = useState(fieldData)
@@ -281,11 +301,35 @@ const UploaderField: FC<UploaderFieldProps> = ({
     [customUpload]
   )
 
+  // 上传前diemension、size校验
+  const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
+    try {
+      const { isOk, errors } = await checkImg({ file, dimension, size })
+      if (isOk) {
+        dispatch({
+          type: 'deleteError',
+          key: fieldKey,
+        })
+        return true
+      } else {
+        dispatch({
+          type: 'setError',
+          [fieldKey]: errors.join(';'),
+        })
+        return LIST_IGNORE
+      }
+    } catch (error) {
+      console.error('error')
+      return LIST_IGNORE
+    }
+  }
+
   return canDrag ? (
     <Dragger
       disabled={disabled}
       onChange={change}
       {...(action && { action })}
+      beforeUpload={beforeUpload}
       onRemove={() => {
         _onDelete1()
         setValue([])
@@ -305,6 +349,7 @@ const UploaderField: FC<UploaderFieldProps> = ({
       {...(action && { action })}
       listType={listType}
       onChange={change}
+      beforeUpload={beforeUpload}
       onRemove={() => {
         _onDelete1()
         setValue([])

diff --git a/packages/generator/src/fields/formItem/upload.field.ts b/packages/generator/src/fields/formItem/upload.field.ts
@@ -108,6 +108,126 @@ const config: Field = {
           type: 'number',
         },
       },
+      {
+        fieldKey: 'dimension',
+        type: 'object',
+        title: '图片尺寸限制',
+        ui: {
+          type: 'object',
+          mode: 'collapse',
+        },
+        schema: [
+          {
+            type: 'number',
+            title: '宽度',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'width',
+          },
+          {
+            type: 'number',
+            title: '最小宽度',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'minWidth',
+          },
+          {
+            type: 'number',
+            title: '最大宽度',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'maxWidth',
+          },
+          {
+            type: 'number',
+            title: '宽度除数',
+            ui: {
+              description: {
+                type: 'icon',
+                trigger: 'hover',
+                title: '宽度是当前值的倍数',
+              },
+              type: 'number',
+            },
+            fieldKey: 'widthDivisor',
+          },
+          {
+            type: 'number',
+            title: '高度',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'height',
+          },
+          {
+            type: 'number',
+            title: '最小高度',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'minHeight',
+          },
+          {
+            type: 'number',
+            title: '最大高度',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'maxHeight',
+          },
+          {
+            type: 'number',
+            title: '高度除数',
+            ui: {
+              description: {
+                type: 'icon',
+                trigger: 'hover',
+                title: '高度是当前值的倍数',
+              },
+              type: 'number',
+            },
+            fieldKey: 'heightDivisor',
+          },
+          {
+            type: 'boolean',
+            title: '宽高相等',
+            ui: {
+              type: 'switch',
+            },
+            fieldKey: 'widthHeightEqual',
+          },
+        ],
+      },
+      {
+        fieldKey: 'size',
+        type: 'object',
+        title: '图片大小限制',
+        ui: {
+          type: 'object',
+          mode: 'collapse',
+        },
+        schema: [
+          {
+            type: 'number',
+            title: '最小尺寸',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'min',
+          },
+          {
+            type: 'number',
+            title: '最大尺寸',
+            ui: {
+              type: 'number',
+            },
+            fieldKey: 'max',
+          },
+        ],
+      },
     ],
   },
 }