vue怎么把对象数组用formDate形式(multipartform-data)传递到后端并接收

vue怎么把对象数组用formDate形式(multipartform-data)传递到后端并接收,第1张

 第一步:前端上传
new Vue({
    data:{
        addGoodsForm:{
            //规格数据
            goodsSpecsList: [{
                spec: '',          //规格
                price: '',         //价格
                stock: '',         //库存
            }]
           
        }

    },
    methods:{

        upload(){   
            //上传类型
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };

            // 创建新的数据对象   多文件上传
            let formData = new FormData();  
                   
            //把数组对象存到formData中
            this.addGoodsForm.goodsSpecsList.forEach((item, i)=> {
                formData.append(`goodsSpecsList[${i}].spec`, item.spec)
                formData.append(`goodsSpecsList[${i}].price`, item.price)
                formData.append(`goodsSpecsList[${i}].stock`, item.stock)
            })
            // 自定义上传
            axios
                .post('输入你要上传的地址...', formData,config)
                .then((res) => {
                    //上传成功回调函数
                })
                .catch((err) => {
                   //上传失败回调函数
                })

        },
    }

})
第二步:后端接收(用的springMVC框架) 1.controller层
@RequestMapping("/uploadImage")
@ResponseBody
public ResultInfo upload(@RequestParam("goodsSpecsList") GoodsSpecsVo goodsSpecsVo) {

    System.out.println(goodsSpecsVo);
    ........

}
2.Vo接收模板类
public class GoodsSpecsVo {
    private List goodsSpecsList;

    @Override
    public String toString() {
        return "GoodsSpecsVo{" +
                "goodsSpecsList=" + goodsSpecsList +
                '}';
    }

    public List getGoodsSpecsList() {
        return goodsSpecsList;
    }

    public void setGoodsSpecsList(List goodsSpecsList) {
        this.goodsSpecsList = goodsSpecsList;
    }
}
 3.domain层
public class GoodsSpecs {
    private Integer id;
    private Integer goods_id;
    private Integer price;
    private String spec;
    private Integer stock;
    public GoodsSpecs(){}
    public GoodsSpecs(Integer id, Integer goods_id, Integer price, String spec, Integer stock) {
        this.id = id;
        this.goods_id = goods_id;
        this.price = price;
        this.spec = spec;
        this.stock = stock;
    }

    @Override
    public String toString() {
        return "GoodsSpecs{" +
                "id=" + id +
                ", goods_id=" + goods_id +
                ", price=" + price +
                ", spec='" + spec + '\'' +
                ", stock=" + stock +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getGoods_id() {
        return goods_id;
    }

    public void setGoods_id(Integer goods_id) {
        this.goods_id = goods_id;
    }

    public Integer getPrice() {
        return price;
    }

    public void setPrice(Integer price) {
        this.price = price;
    }

    public String getSpec() {
        return spec;
    }

    public void setSpec(String spec) {
        this.spec = spec;
    }

    public Integer getStock() {
        return stock;
    }

    public void setStock(Integer stock) {
        this.stock = stock;
    }
}
end~~~有不对请指出,以上代码希望对您有所帮助!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/734062.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-27
下一篇 2022-04-27

发表评论

登录后才能评论

评论列表(0条)

保存