Vue --- 记录Vue使用POST上传数组问题

记录Vue使用POST上传数组问题

后台代码:

    @PostMapping("/demo")
    public String demo(
            @RequestParam(value = "ids", required = false) List<Integer> ids,
            Integer id
    ) {
        log.info("集合:{}", ids);
        log.info("名称:{}", id);
        return "hello_world";
    }

这两天跟前端联调的时候碰到一个问题,前端给我传数据格式给我传了个这个过来,还说自己没问题,这就算了,这种问题不会百度么,百度不行找谷歌.差点没想拿起我82年的老拖鞋拍死她.
在这里插入图片描述

看看这个原因怎么产生的,无非就是用qs.stringify()习惯了,不管啥东西都无脑用这种.本来用这个没问题,它有很多种用法,但是你不能只会一种啊!上拖鞋打死她;
在这里插入图片描述
代码:

	let params = {
      ids: [1, 2, 3],
      id: 1
    }
   axios.post('http://localhost:8081/demo', qs.stringify(params)
   ).then(res => {
     console.log(res.data)
   })

这种是根本拿不到值的,或者直接抛出异常类型转换失败
在这里插入图片描述
之后跟这位姐姐思考了半天觉得不行于是决定换一种写法:不用qs.stringify函数了

              axios.post('http://localhost:8081/hello/world/demo', params
            ).then(res => {
                    console.log(res.data)
            })

然后 … :
在这里插入图片描述

特么的qs.stringify的那么多种形式被吃了吗?

	//形式: ids=1&ids=2&ids=3&id=1
	qs.stringify(params, { indices: false })
	
	//形式: ids%5B0%5D=1&ids%5B1%5D=2&ids%5B2%5D=3&id=1
	//其实这个形式是:ids[0]=1&ids[1]=2&ids[2]=3&id=1 用URL解码一下就好了
	// 默认也是这种格式
	qs.stringify(params, {arrayFormat: 'indices'})
	
	//形式: ids%5B%5D=1&ids%5B%5D=2&ids%5B%5D=3&id=1
	//其实这个形式是:ids[]=1&ids[]=2&ids[]=3&id=1 用URL解码一下就好了
	qs.stringify(params, {arrayFormat: 'brackets'})
	
	//形式:ids=1&ids=2&ids=3&id=1
	qs.stringify(params, {arrayFormat: 'repeat'})

第一种方式:

axios.post('http://localhost:8081/hello/world/demo', qs.stringify(params, { indices: false })
   ).then(res => {
                    console.log(res.data)
   })

它会将你的参数转换成如下形式: URL?ids=1&ids=2&ids=3
结果:
在这里插入图片描述
第二种方式:

	axios.post('http://localhost:8081/hello/world/demo', qs.stringify(params, {arrayFormat: 'repeat'})
            ).then(res => {
                    console.log(res.data)
            })

它和上面一种格式是一样的.
结果:
在这里插入图片描述
第三种方式:

axios.post('http://localhost:8081/hello/world/demo', qs.stringify(params, {arrayFormat: 'brackets'})
            ).then(res => {
                    console.log(res.data)
            })

这个格式: URL?ids[]=1&ids[]=2&ids[]=3
这种方式有点特殊需要后台改一下代码
后台代码:

    @PostMapping("/demo")
    public String demo(
            @RequestParam(value = "ids[]", required = false) List<Integer> ids,
            Integer id
    ) {
        log.info("集合:{}", ids);
        log.info("名称:{}", id);
        return "hello_world";
    }

结果:
在这里插入图片描述
这像啥,读书做选择题,完美避开三个正确答案

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值