uni.request直接发送formData格式参数,后端接收为空——解决办法

uni.request formData发送空值问题及解决
当使用uni.request发送formData格式参数时,后端可能接收到空值。问题在于uni.request默认请求头为application/json,需将其改为application/x-www-form-urlencoded。另外,后端加@RequestBody注解也可解决,但需确保前端请求头正确设置。
部署运行你感兴趣的模型镜像

uni.request直接发送formData格式参数,后端接收为空——解决办法

情景描述: Form表单用的是<uni-form> 组件,提交表单是按uni-form的文档调用的

methods: {
        submitForm(form) {
            // 手动提交表单
            this.$refs.form.submit().then((res)=>{
                console.log('表单返回得值:', res)
            })
        }
    }

来获取 表单信息res,然后调用uni.request对后端进行请求。写的时候,前几个data传值时,由于参数就一两个,就直接是data:{name:name,pwd:pwd},写的,后来这个表单涉及到data传值较多,打算直接data:res,就完了,让后端自己接收去呗。但一测试,报500,传值为空。。。

. 就很纳闷,表单的参数名都对应着呢,又把后端改成map接收也不行,前端console.log('表单的值:', res)控制台也是有值的。

解决办法

通过参看前端控制台发现,uni.request默认请求头是content-type:application/json,而我并没有对请求头进行设置,
在这里插入图片描述
网上查了一下,对请求头设置了一下

this.$refs[form]
	.submit()
	.then(res => {
		console.log('表单的值:', res)
		uni.request({
			url: 'url',
			method: 'POST',
			data: res,
			header: {
			"Content-Type": "application/x-www-form-urlencoded"
			}, // 请求头,使参数可以formData格式发送
			dataType: 'json', // 返回数据格式,
			success: result => {
				if (success) {
					console.log(result);
					uni.showToast({
						title: '验证失败,'+error,
						image: '/static/img/error.png'
					})
				} else {
					uni.showToast({
						title: '验证成功'
					})
				}
			},
		});
	
	})
	.catch(errors => {
		console.error('验证失败:', errors)
	})

将Content-Type设置成application/x-www-form-urlencoded后,后端成功接受到各参数,问题解决。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
4.28更新
后来测试中,了解到还有另一种解决方法

给后端参数前加一个@RequestBody

	@RequestMapping("aMethods")
    public JsonBean aMethods(@RequestBody UserInfo userInfo){
        return aService.aServiceMethod(userInfo);
    }

就解决了

起因是因为有个Integer类型的参数传空值时,后端接收判类型转换错误;
后来也给后端接参也加了@RequestBody这个,再测试,还是不行,是因为前端请求头还是用的之前的

"Content-Type": "application/x-www-form-urlencoded"

也就是说,加@RequestBody后,前端请求头得是

"Content-Type": "application/json"

了。

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型,相比 3.0 版本,它提升了图像质量、运行速度和硬件效率

const BASE_URL = 'http://82.156.202.229:80/prod/app-api'; const TIMEOUT = 10000; function request(url, method = 'GET', data = {}, customHeader = {}) { console.log(`🚀 发起请求:${method} ${BASE_URL}${url}`); console.log('请求参数:', data); return new Promise((resolve, reject) => { const token = uni.getStorageSync('token'); const header = { 'Content-Type': 'application/json', ...customHeader }; // 重要修改:只有存在token且不是登录/注册等认证接口时才添加Authorization if (token && !url.includes('/auth/')) { header['Authorization'] = 'Bearer ' + token; } console.log('请求头:', header); uni.request({ url: BASE_URL + url, method: method, data: data, header: header, timeout: TIMEOUT, success: (res) => { console.log('✅ 请求成功,状态码:', res.statusCode); console.log('响应数据:', res.data); // 对于登录接口,401可能表示用户名密码错误,不应该直接跳转登录页 if (url.includes('/auth/login')) { // 登录接口的特殊处理:即使401也返回数据,让业务层处理 resolve(res.data); } // 状态码 2xx 成功 else if (res.statusCode >= 200 && res.statusCode < 300) { resolve(res.data); } // 非登录接口的401处理 else if (res.statusCode === 401) { uni.removeStorageSync('token'); uni.showToast({ title: '登录已过期', icon: 'none' }); setTimeout(() => { uni.reLaunch({ url: '/pages/user/login' }); }, 1500); reject(res.data); } else { reject(res.data); } }, fail: (err) => { console.error('❌ 请求失败:', err); uni.showToast({ title: '网络异常', icon: 'none' }); reject(err); } }); }); } export default request; 我想要一个文件上传的请求格式和这个request.js一样
最新发布
11-07
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悯码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值