前端上传文件使用FormData给后端传参

这个传参格式已经没什么说的价值了,因为从业的人肯定都用过,但是啊,但是今天有人问我了,所以再说说吧

首先,先把参数转换为new FormData()

let formdata = new FormData();
// 如果上传多个文件,是数组fileList的话,循环append
for(var i = 0; i < fileList.length; i ++) {
	formdata.append('files', fileList[i].originFileObj)     // 这里切记这个originFileObj
}
// 其他参数
formdata.append('approvalAccountId',1);
formdata.append('instructionTypeId',1);

这样写完了,请求接口的参数是这样:
在这里插入图片描述

但是接口还是不成功,大部分人都知道这样的传参方式需要设置请求头:

Content-Type:multipart/form-data

但是当你设置上了以后发现,接口还是不成功,这个请求头后面没有boundary
在这里插入图片描述
好了,然后开始有人手动加上了boundary,但是后面并没有有效值,这就是今天要说的问题:

!!!这个请求头,去掉它,不要加啊,不要加,浏览器会默认加上的!


突然就完了

前端开发中,我们经常会遇到需要上传文件的场景,而 FormData 就是一种能够方便实现文件上传的技术手段。而后端 Qt 则是一种强大的跨平台开发框架,具有良好的可移植性和高效性能,能够轻松地实现各种类型的应用开发。 在前端使用 FormData 进行文件上传的过程中,需要使用 JavaScript API 来获取文件并将其添加到 FormData 中。在上传文件时,我们可以通过 XMLHttpRequest(XHR)对象或者 Fetch API 对 formData 对象进行异步请求发送。而后端 Qt 中,则需要使用相应的网络模块来处理收到的文件上传请求,同时需要完成文件的存储和相关的逻辑处理。 首先,在进行文件上传前,我们需要明确前后端传输数据的格式和类型,并且确保前后端约定的接口名称和参数格式一致。对于文件上传,我们还需要注意文件格式和大小的限制,以及如何处理上传失败、重复上传等问题。 其次,前端 FormData 对象在上传文件时需要注意以下几点: 1.通过使用append() 方法将文件数据添加到 FormData 中; 2.设置 xhr 发送的请求头,包括 Content-Type 等参数; 3.监听 xhr 上传进度,根据上传进度显示进度条等信息; 4.对于上传失败的情况,需要进行错误处理并给出相应的提示。 最后,在后端 Qt 中,我们需要使用相应的文件上传接口处理收到的请求。同样需要注意以下几点: 1.获取 FormData 中的文件数据,并保存到指定的目录下; 2.对上传的文件进行必要的内容验证和格式检查; 3.根据实际需求,进行文件命名、保存路径等调整; 4.根据上传的文件数据完成后续的逻辑处理和响应。 通过以上步骤,前端FormData 文件上传和后端 Qt 的文件处理可以得到成功的协同。同时,在实际项目中,我们还需要考虑安全、兼容性等方面的因素,确保系统的可靠性和稳定性。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值