GitHunt
CH

chenxiaochun/paste-upload-image

基于antd的粘贴上传图片组件

复制粘贴图片上传组件

使用方式:

💢 只支持 antd4.0 及以上版本

yarn add @rmb/paste-upload-image
import { UploadImage } from '@rmb/paste-upload-image'
import { Form } from 'antd'

const App = () => {
  const [form] = Form.useForm()

  return (
    <UploadImage form={form} label="京东截图" />
  )
}

参数配置:

  • form,外部表单实例,必须传递
  • name,表单项的 name,默认为imgList
  • disabled,禁用组件的状态
  • maxSize,最大上传图片的数量,默认为5张图片
  • label,表单项的显示名称

在组件加载时,如果想给其设置默认值,应该先使用transformUrlToFile方法,将拿到的图片 url 转换成此组件需要的格式,再使用form.setFieldsValue方法进行设置:

import { transformUrlToFile } from '@rmb/paste-upload-image'

form.setFieldsValue({
  imgList: transformUrlToFile(['1.png', '2.png']),
})

Languages

TypeScript98.9%JavaScript0.6%HTML0.3%CSS0.1%
Created September 3, 2025
Updated September 3, 2025