ant-design-pro中form中使用upload组件上传图片遇到的坑

最新推荐文章于 2024-06-25 10:07:44 发布
最新推荐文章于 2024-06-25 10:07:44 发布
阅读量1k 收藏 1
点赞数
分类专栏： ant-design 文章标签： react ant-design-pro upload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eele_one/article/details/84663621
版权

 

描述：前端上传图片后，后台返回上传图图片的地址。form表单提交的时候将图片的地址传给后端

问题：图片上传成功后后台也返回了地址但是在提交的时候始终把本地的地址提交上去，无法获取到后台 的地址

处理：实际上formItem的问题，formItem中寻找值的时候如果有多个元素的话会获取有value值(upload中input的value值),所以只将upload组件放入到formItem中其余的元素可以在外面。这样不会出现上述的问题

eele_one
关注
专栏目录
AntDesign Upload组件上传图片
hhthwx的博客
11-05 7863
技术选型 前端技术选型： React Hook + typescript antd版本：3.18 使用Upload上传图片 上传效果截图 预览效果截图 项目中完整写法： import {Button, Form, Input, Modal, Upload, Icon} from 'antd'; const RegistrationForm = (props: IProps) => { ...
在antd-pro的form中使用Upload组件上传文件
热门推荐
百岁如流富贵冷灰的博客
09-26 1万+
好久没更博客了......这他么活根本干不完我有啥办法啊o(╥﹏╥)o 直接进入正题：       思路：首先，当调用Upload组件的时候每次选择后会自动上传而不会随表单一起提交，这个显然不符合实际需求，所以需要在Upload组件中定义beforeUpload方法并且返回false拦截文件的自动上传，同时把文件信息添加到state中，此时需要考虑到对于上传列表的删除对state的影响，所以需...
antd pro表单 上传图片 拿到ProFormUploadButton调用action的返回数据
山东理工1134
12-08 924
新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + Shift + H 无序列表：Ctrl/Command + Shift + U 有序列表：Ctrl/Command + Shift + O 检查列表：Ctrl/Com
formcreat 上传组件Upload type为file时不可预览如何解决？
qq_41891573的博客
09-25 1200
formcreat 上传组件Upload type为file时不可预览如何解决？ “type”: “select”, “uploadType”: “file”, “action”: “/api/file/uploadsss”, “name”: “file”, “multiple”: true, “accept”: “file/*”, “limit”: 3, handleIcon: true, ...
ProFormUploadButton中的自定义受控组件fileList属性
KisJLLLLLL的博客
07-21 1037
antdPro的ProFormUploadButton自定义数据回显，由于功能需求，需要通过接口获取已上传的文件，而且不是通过form包起来，所以initialValue是不可用的，所以我们需要通过fileList来进行数据回显。
ant-design-vue嵌入html,ant-design-vue 快速避坑指南(推荐)
weixin_39972519的博客
06-23 3016
ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。本文主要目的是总结一些开发过程中比较耗时间去查找，文档中没有具体说明的常见问题，同时希望能给新上手此框架的...
react结合ant-design的Upload组件--formData文件上传
weixin_42215167的博客
05-08 3897
react结合ant-design的Upload组件–formData文件上传 导入 import { Upload } from 'antd'; render中使用 <Upload accept=".jpg,.gif,.png" listType="picture-card" customRequest={onImgFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现 showUploadList={false} > &
ant-design-vue中的上传文件和下载文件
2303_79576117的博客
11-18 1067
vite + Vue3 + ant-esign-vue 的后台管理系统中实现文件上传。实践案例，初学者。
ant-design Upload上传组件使用 编辑功能图片回显
m0_73481765的博客
08-31 2705
因为我们要做的是编辑回显获取的数据形式为[{ url: 图片路径, uid: 图片标识 }]导致方式图片显示数组fileLists导致自动上传无法返回路径，使用beforeUpload事件不使用onChange是因为，onChange做图片上传会和onRemove事件冲突，当删除图片时两个事件会一起执行所以我们使用beforeUpload避开事件冲突。当我们使用 ant-design Upload上传组件进行编辑功能回显时，不能使用使用 action上传，自己手续一个自定义上传因此我们要这样设置。
实现ProFormUploadButton和Upload组件回显的办法
最新发布
2301_81497027的博客
06-25 600
【代码】实现ProFormUploadButton和Upload组件回显的办法。
AntDesign Pro upload组件在form中使用
weixin_44056269的博客
12-03 1286
【代码】AntDesign Pro upload组件在form中使用。
使用antd-pro组件 实现图片上传和图片编辑
weixin_43963525的博客
02-17 5565
1.ProFormUploadButton与 upload 相同。预设了 Button 的样式，其他与 Upload 相同。 1.引入上传组件 import ProForm, {ProFormUploadButton} from '@ant-design/pro-form'; 2.组件内容 <ProFormUploadButton label="图片" max={1} name="pic"
React中基于antd/antdPro中Upload上传按钮点击删除弹框确认是否删除判断
KisJLLLLLL的博客
05-16 1753
如果你点击Upload或者ProFormUploa删除按钮，就会触发按钮中的onRemove属性，然后你再改变hooks，就会点击确定之后，hooks会慢一步改为true,导致点击弹框出来的确认按钮不会删除，第二时间才会删除，由于函数不能第一时间获取hooks异步更新的值和触发两次onRemove导致的。，一开始我是在showUploadList中的removeIcon属性来修改，给他一个poponfirm弹框，由于根据文档，onRemove中只用return true或者 false来判断是否删除改文件。
React Ant Design Upload 组件定制开发的几个问题
与Scala+Lift有关
02-24 727
1.customRequest 自定义上传 customRequest={uploadHandler} const uploadHandler = async (options: any) => { const { onSuccess, file } = options; if (!file) { return false; } const fd = new FormData(); fd.append("file", file);
Antd Upload 和 Antd Form 结合的踩坑记录
weixin_30950887的博客
05-01 6613
今天弄了半天这个上传组件结合表单组件的问题。 这个上传文件列表，如果是当前正在修改或者上传成功，当然是可以正常工作的，但是想要增加一个功能： 下次打开 Modal 时，表单字段中的上传文件字段，可以默认回显文件列表（该列表是 Upload 组件内部实现的）。 由于该 Upload 组件已经使用 Form 组件统一代理，所以需要通过 initialValue 字段进行初始值的设定（如果有的...
antDesignPro upload+fetch+formdata实现上传
weixin_45190306的博客
09-03 1817
需要的数据格式是这样的，之前遇到过获取不到参数或者类型不对等各种问题；现在将解决方案做个记录： 1、用formdata封装数据： formData.append('file', fileList[0].originFileObj); formData.append('任意参数', 任意值); 2、调用dispatch时的payload: formdata 3、service文件夹的调用接口的js特别注意： method: 'POST', data: params, headers: { .
ElementUI中el-form验证el-upload上传图片校验不通过
weixin_45869725的博客
12-01 7226
ElementUI中el-form验证el-upload上传图片校验不通过
antDesignPro项目：自定义上传组件（分片传、取消上传等）
qq_38969618的博客
11-29 1531
基于antd上传的二次封装
upload上传 -- 取不到form表单里的parameter
weixin_30830327的博客
09-19 164
上传操作时，form表单中使用了enctype="multipart/form-data"后， 再用平时的request取form中的参数就无法获得了，一般上传组件都有自己取form中参数的方法。 如果参数比较少，可以将参数放在action的url中传入，此时servlet中就可以使用request获得参数值了。 或者用隐藏域传值，同样可以使用request获取参数值。 转载于:https:...
Ant Design Vue 1.7.8版本中 a-upload使用自己封装的接口进行上传文件
05-24
在 Ant Design Vue 1.7.8 版本中，a-upload 组件可以使用自己封装的接口进行上传文件。你可以在 a-upload 组件的 `customRequest` 属性中指定一个自定义的上传函数，该函数将会代替默认的上传行为。 下面是一个示例...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值