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

最新推荐文章于 2024-07-18 12:51:36 发布

小米先森丶

最新推荐文章于 2024-07-18 12:51:36 发布

阅读量2.6k

点赞数 2

分类专栏： Vue 开发遇到问题文章标签： vue

本文链接：https://blog.csdn.net/qq_44866495/article/details/107833434

版权

Vue 开发遇到问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

记录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";
    }