Ant Design Pro 组件踩坑记录

最新推荐文章于 2025-06-09 09:04:49 发布

网安小陈

最新推荐文章于 2025-06-09 09:04:49 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_53312997/article/details/126054611

ProFormUploadButton 踩坑记录

最近在用ant design pro 组件做项目,在使用到ProFormUploadButton这个组件的时候,发现很多文档上没有写的东西,接下来把我的踩坑记录分享给大家.

刚开始只有一个上传的需求,我就把官网的示例直接copy了下来,如下:

<ProFormUploadButton label="upload" name="upload" action="upload.do" />

后面跟我说要一个预览的功能,这样其我就参考ant design 的组件加成这样:

<ProFormUploadButtonname="businessLicense"label="营业执照"max={1}action="upload.do"fieldProps={
  
  {multiple: false,name: 'file',listType: 'picture-card',accept:"image/png, image/jpeg",headers: {'timestamp': (new Date().valueOf()) + ''},onChange: (e) => {handleChange(e)},}}fileList={fileList}extra="只能上传jpg/png文件,且不大于3MB"/>

测试后,发现没有前置校验,于是加了前置校验,如下:

// 上传前置校验
const beforeUpload = (file: RcFile) => {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {message.error('只允许上传 JPG/PNG 格式的文件');}const isLt3M = file.size / 1024 / 1024 < 3;if (!isLt3M) {message.error('仅支持3M以下的文件');}return isJpgOrPng && isLt3M};

测试后,发现就算校验了,会自动跳过,还是会调接口,所以改成这样

// 上传前置校验
const beforeUpload = (file: RcFile) => {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {message.error('只允许上传 JPG/PNG 格式的文件');}const isLt3M = file.size / 1024 / 1024 < 3;if (!isLt3M) {message.error('仅支持3M以下的文件');}// 如果返回了if ((isJpgOrPng && isLt3M) === false) {// 在这里记得要清空fileList// 返回这个参数beforeUpload为false就可以拦截住了return Upload.LIST_IGNORE} else {return true}};

注意:除了fileList以外, 其他所有的属性都要放到ProFormUploadButton组件的fieldProps里面,这样才能生效.

注意二: 在onchange方法里如果上传文件状态为error,还是会显示到fileList,这时候要处理一下:

if (info.file.status == 'error') {message.error('上传失败!请稍后再试')setFileList([])}

我以为到这里就结束了,没想到,又加了需求,说是要让图片可以旋转,放大缩小,我网上找了个js库,用的人比较多,鉴于我是react, 所以又找了个用react封装的插件,下面贴一下两个库的git地址.

react版本 tinymins/viewerjs-react: React wrapper for viewerjs. (github.com)

最低0.47元/天解锁文章

200万优质内容无限畅学