antd中的upload上传文件添加额外参数data，限制文件大小，获得后端数据，

最新推荐文章于 2024-04-25 17:47:46 发布
最新推荐文章于 2024-04-25 17:47:46 发布
阅读量1.1w 收藏 8
点赞数 2
分类专栏： antd 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45981863/article/details/108828690
版权

最近的需求是上传文件，并且在上传之后获得后端返回的数据，并且把它展示出来
antd中的upload，点击上传按钮掉后端接口，要是想传入额外的参数，就用data这个参数，可以写成下图所示的对象形式

限制文件大小，我限制的是文件大小不超过100kb，然后错误信息弹出的时间停留是2s
在这里插入图片描述
在获得后端数据这里，antd的官方文档里面有写response是后端返回的数据
在这里插入图片描述

Memory ?
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
使用a-upload上传图片或者文件(符合规则，显示在fileList，不符合不显示)
chali1314的博客
04-25 2714
文件或者图片上传
antd Upload 文件上传的示例代码
10-17
主要介绍了antd Upload 文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
antd的Upload怎么实现即上传文件，又上传额外参数(非Upload的data属性)
kjprime的博客
03-11 4800
情况说明 今天（2022.3.11）为了这个问题我从2022.3.10的中午13点多，然后搞到了现在2022.3.11凌晨，就是为了解决即上传文件，又上传额外参数，因为我们要定位某某数据才能够后端就行保存和修改。 我看到是官方文档，一直用data，后面试了没有用，又百度，百度又教我用data属性，但是到头来，还是没有解决(不知道是我配置有问题还是其他问题，这个data属性只能当作回调函数，不能发送，后端GET，和POST都接收不到数据。) 我是前后端分离项目，既然header要发头部，那就把参数也放到头部
AntDesign - upload 上传组件 - 自定义函数customRequest可以自定义参数、请求方式、headers 等
最新发布
pig_ning的博客
04-25 610
AntDesign - upload 上传组件 - 自定义函数customRequest可以自定义参数、请求方式、headers 等
react中，antd组件中的upload实现，文件的上传，文件的下载，导出，批量导出（直接调接口），上传额外的参数（data）
夜空孤狼啸的博客
07-21 7363
react中，antd组件中的upload实现，文件的上传，文件的下载，导出，批量导出（直接调接口），上传额外的参数（data）
antD上传文件（form-data），同时携带多个参数
weixin_39167759的博客
09-23 3932
antD上传文件（form-data），同时携带多个参数
Antd upload组件结合form上传文件及其他参数总结
m0_58002936的博客
08-17 2084
form表单中：
antd upload控件的data参数
热门推荐
05-23 2万+
通过data属性传递的参数，在后台可以通过request获取到。经测试data可以是一个对象或者函数 ，<Upload name="file" data={this.state.ingoreFirst} action="/api/uploadFile" onChange={(info)=>this.handleUploadFileOnChange(info)} >如果是一个boo...
antd组件Upload实现自己上传的实现示例
10-17
在本文中，我们将深入探讨如何使用Ant Design（antd）组件库中的`Upload`组件来实现自定义上传功能。Ant Design是一个流行的React UI框架，提供了一系列美观且实用的组件，其中包括`Upload`，用于处理文件上传操作。...
vue+el_upload实现文件上传的方式.doc
02-01
"Vue+el_upload实现文件上传的方式" 在Web开发中，文件上传是一个非常常见的需求。 Vue.js是一个流行的前端框架，el_upload是一个基于Element UI的文件上传组件。通过组合这两个技术栈，我们可以轻松实现文件上传的...
ant design中upload组件上传大文件,显示进度条进度的实例
01-18
Upload组件是自带上传进度，但是样式调起来很麻烦，我们要做的就是自定义一个 首先页面要引入组件 Upload， Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭...
使用FormData实现上传多个文件
10-17
在现代Web应用中，文件上传是一项常见的功能。`FormData`对象是HTML5引入的一个非常实用的API，它允许我们方便地处理表单数据，尤其是在上传文件时。本篇文章将详细介绍如何使用`FormData`来实现上传多个文件的功能...
antd upload上传组件 限制上传文件大小
qq_44739896的博客
02-01 2050
upload上传组件 限制文件大小
Reactjs中用antd的Upload组件上传文件并且限制上传文件的大小
weixin_46573466的博客
10-30 7915
标题reacthooks中用antd Upload 附件上传（附件大小不超过2M具体操作） 1.1.antd官网Upload组件： https://ant.design/components/upload-cn/ antd封装了一些实用的组件，但具体的api写的不是很详细，这篇文章主要介绍Upload中的附件传送时大小不超过具体的值得操作。 2.使用的是react封装的umi框架，软件使用了webstorm，在文中按需求用了antd组件库中的Form，以及Upload组件。 3.具体代码如下： <Fo
antd中Upload上传图片宽高限制以及上传文件的格式限制
04-23 600
项目中有一个需求，要上传轮播图，且有尺寸要求，所以就需要在上传图片的时候进行尺寸限制，使用了Upload组件，需要在组件的beforeUpload方法中进行限制。如果尺寸不符合要求，validateImageSize方法会返回false，如果尺寸符合就会返回true。
antd5:图片上传接口参数
YanHSama的博客
08-25 361
antd5上传图片
react使用antd组件完成文件上传
孜然卷的博客
10-21 1362
【代码】react使用antd组件完成文件上传。
a-upload自定义上传customRequest并接收多个参数
weixin_59423550的博客
07-31 1983
【代码】a-upload自定义上传customRequest并接收多个参数。
vue+antd实现文件上传
tanghuaicong的博客
09-10 3330
前言 提示：上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程 upload上传 单文件上传代码如下（示例）： <a-upload name="avatar" class="avatar-uploader" list-type="picture-card"//上传列表的内建样式 :show-upload-list="false" :action="common.initUpLoadUrl('file/******')"//上
怎么使用antd组件upload上传文件给后端
07-08
要使用 antd 组件 Upload 来上传文件给后端，你需要进行以下步骤： 1. 安装 antd 组件库： ``` npm install antd ``` 2. 在你的代码中引入所需的组件： ```jsx import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; ``` 3. 创建一个状态来存储上传文件的列表： ```jsx const [fileList, setFileList] = useState([]); ``` 4. 创建一个函数来处理文件上传： ```jsx const handleUpload = () => { const formData = new FormData(); fileList.forEach(file => { formData.append('files', file); }); // 发送上传请求给后端 // 使用 axios 或其他 HTTP 库发送 POST 请求 // 例如： // axios.post('/api/upload', formData) // .then(response => { // // 处理上传成功后的逻辑 // }) // .catch(error => { // // 处理上传失败后的逻辑 // }); }; ``` 5. 在渲染的 JSX 中使用 Upload 组件： ```jsx <Upload fileList={fileList} onChange={({ fileList }) => setFileList(fileList)} > <Button icon={<UploadOutlined />}>选择文件</Button> </Upload> <Button onClick={handleUpload}>上传</Button> ``` 上述代码中，我们使用了 antd 的 Upload 组件来创建一个文件上传的区域。通过设置 fileList 属性和 onChange 事件来管理上传的文件列表。当用户选择文件后，fileList 状态会自动更新。 最后，我们创建了一个按钮来触发 handleUpload 函数，该函数会将文件列表中的文件转换为 FormData，并发送 POST 请求给后端进行文件上传。 请注意，此处的上传逻辑仅为示例，具体的后端处理逻辑需要根据你的后端框架来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值