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

最新推荐文章于 2024-11-05 19:04:06 发布
最新推荐文章于 2024-11-05 19:04:06 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： ant-design 文章标签： react ant-design-pro upload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/eele_one/article/details/84663621
本文描述了前端上传图片后，如何正确地在form表单提交时使用后台返回的图片地址，避免本地地址被误传的问题。关键在于调整formItem的结构，确保仅upload组件包含在内。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

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

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

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

在antd-pro的form中使用Upload组件上传文件
百岁如流富贵冷灰的博客
09-26 1万+
好久没更博客了......这他么活根本干不完我有啥办法啊o(╥﹏╥)o 直接进入正题：       思路：首先，当调用Upload组件的时候每次选择后会自动上传而不会随表单一起提交，这个显然不符合实际需求，所以需要在Upload组件中定义beforeUpload方法并且返回false拦截文件的自动上传，同时把文件信息添加到state中，此时需要考虑到对于上传列表的删除对state的影响，所以需...
AntDesign Upload组件上传图片
hhthwx的博客
11-05 7989
技术选型 前端技术选型： React Hook + typescript antd版本：3.18 使用Upload上传图片 上传效果截图 预览效果截图 项目中完整写法： import {Button, Form, Input, Modal, Upload, Icon} from 'antd'; const RegistrationForm = (props: IProps) => { ...
antd pro表单 上传图片 拿到ProFormUploadButton调用action的返回数据
山东理工1134
12-08 1284
新的改变 我们对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 1319
formcreat 上传组件Upload type为file时不可预览如何解决？ “type”: “select”, “uploadType”: “file”, “action”: “/api/file/uploadsss”, “name”: “file”, “multiple”: true, “accept”: “file/*”, “limit”: 3, handleIcon: true, ...
Antd Form 表单中使用Upload组件
DaXiong1024的博客
08-31 3921
Antd Form 表单中使用Upload组件 html <Form.Item label='文件上传' name='uploadFile' valuePropName='fileList' getValueFromEvent={normFile} rules={[ { required: true, message: '必填' } ]} > <Upload {...uploadProps} > <Bu
3.2 Upload源码分析 -- ant-design-vue系列
weixin_44438233的博客
09-12 1459
ant-design-vue系列的Upload源码分析，主要是调用vc-upload的上传方法，实现对上传文件过程和结果的管理
ant-design-vue嵌入html,ant-design-vue 快速避坑指南(推荐)
weixin_39972519的博客
06-23 3202
ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。本文主要目的是总结一些开发过程中比较耗时间去查找，文档中没有具体说明的常见问题，同时希望能给新上手此框架的...
vue3 ant-design-vue 封装上传图片组件
weixin_44565776的博客
05-22 1354
“vue3 封装上传图片组件;
vue3+ant-design-vue上传组件实现
a309785147的博客
08-14 1084
ant-design-vue的上传组件直接拿来用要写的废话挺多的，封装起来调用就简介很多。
ant-design Upload上传组件使用 编辑功能图片回显
m0_73481765的博客
08-31 3104
因为我们要做的是编辑回显获取的数据形式为[{ url: 图片路径, uid: 图片标识 }]导致方式图片显示数组fileLists导致自动上传无法返回路径，使用beforeUpload事件不使用onChange是因为，onChange做图片上传会和onRemove事件冲突，当删除图片时两个事件会一起执行所以我们使用beforeUpload避开事件冲突。当我们使用 ant-design Upload上传组件进行编辑功能回显时，不能使用使用 action上传，自己手续一个自定义上传因此我们要这样设置。
ProFormUploadButton中的自定义受控组件fileList属性
KisJLLLLLL的博客
07-21 1313
antdPro的ProFormUploadButton自定义数据回显，由于功能需求，需要通过接口获取已上传的文件，而且不是通过form包起来，所以initialValue是不可用的，所以我们需要通过fileList来进行数据回显。
实现ProFormUploadButton和Upload组件回显的办法
2301_81497027的博客
06-25 1589
【代码】实现ProFormUploadButton和Upload组件回显的办法。
AntDesign Pro upload组件在form中使用
weixin_44056269的博客
12-03 1504
【代码】AntDesign Pro upload组件在form中使用。
使用antd-pro组件 实现图片上传和图片编辑
weixin_43963525的博客
02-17 5844
1.ProFormUploadButton与 upload 相同。预设了 Button 的样式，其他与 Upload 相同。 1.引入上传组件 import ProForm, {ProFormUploadButton} from '@ant-design/pro-form'; 2.组件内容 <ProFormUploadButton label="图片" max={1} name="pic"
antd的使用(文件上传)
Hero_孙的博客
12-31 3008
需求: 将本地文件通过上传接口上传 使用的工具: react, antd, <FormItem {...formItemLayout} label="营业执照1" > {getFieldDecorator('license1', { })(<Upload ...
React中基于antd/antdPro中Upload上传按钮点击删除弹框确认是否删除判断
KisJLLLLLL的博客
05-16 2152
如果你点击Upload或者ProFormUploa删除按钮，就会触发按钮中的onRemove属性，然后你再改变hooks，就会点击确定之后，hooks会慢一步改为true,导致点击弹框出来的确认按钮不会删除，第二时间才会删除，由于函数不能第一时间获取hooks异步更新的值和触发两次onRemove导致的。，一开始我是在showUploadList中的removeIcon属性来修改，给他一个poponfirm弹框，由于根据文档，onRemove中只用return true或者 false来判断是否删除改文件。
React Ant Design Upload 组件定制开发的几个问题
与Scala+Lift有关
02-24 814
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);
【Ant.designpro】上传图片
最新发布
itxnk的博客
11-05 708
fieldProps:可以监听并且获取到组件输入的内容。
antd上传组件（Upload）如何设计成受控组件
徐同保的专栏
04-19 417
antd上传组件（Upload）如何设计成受控组件
Antd Upload 和 Antd Form 结合的踩坑记录
weixin_30950887的博客
05-01 6661
今天弄了半天这个上传组件结合表单组件的问题。 这个上传文件列表，如果是当前正在修改或者上传成功，当然是可以正常工作的，但是想要增加一个功能： 下次打开 Modal 时，表单字段中的上传文件字段，可以默认回显文件列表（该列表是 Upload 组件内部实现的）。 由于该 Upload 组件已经使用 Form 组件统一代理，所以需要通过 initialValue 字段进行初始值的设定（如果有的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值