Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: upload support img size limit（#57） #102

Merged
merged 1 commit into from
Jan 5, 2022
Merged

feat: upload support img size limit（#57） #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions examples/form-generator/src/App/schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
// },
// ],
// }

Expand Down
3 changes: 3 additions & 0 deletions examples/form-generator/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ var baseConfig = {
},
server: {
port: 2002,
proxy: {
'/v2': 'https://www.mocky.io/',
},
},
}

Expand Down
55 changes: 50 additions & 5 deletions packages/drip-form-theme-antd/src/UploaderField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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> = ({
Expand All @@ -67,6 +85,8 @@ const UploaderField: FC<UploaderFieldProps> = ({
afterAction,
getKey,
jdAction,
dimension,
size,
...restProps
}) => {
const [initValue, setValue] = useState(fieldData)
Expand Down Expand Up @@ -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([])
Expand All @@ -305,6 +349,7 @@ const UploaderField: FC<UploaderFieldProps> = ({
{...(action && { action })}
listType={listType}
onChange={change}
beforeUpload={beforeUpload}
onRemove={() => {
_onDelete1()
setValue([])
Expand Down
120 changes: 120 additions & 0 deletions packages/generator/src/fields/formItem/upload.field.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
],
},
],
},
}
Expand Down
Loading