vue怎么把对象数组传输到后端并接收(formDate格式multipart/form-data)
vue怎么把对象数组传输到后端并接收(formDate格式multipart/form-data)
·
有时我们需要用content-type=multipart/form-data的格式传输数据,下面演示下前端上传与后端接收过程:
第一步:前端上传
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("/upload")
@ResponseBody
public ResultInfo upload( GoodsSpecsVo goodsSpecsVo ) {
System.out.println(goodsSpecsVo);
........
}
2.Vo接收模板类
public class GoodsSpecsVo {
private List<GoodsSpecs> goodsSpecsList;
@Override
public String toString() {
return "GoodsSpecsVo{" +
"goodsSpecsList=" + goodsSpecsList +
'}';
}
public List<GoodsSpecs> getGoodsSpecsList() {
return goodsSpecsList;
}
public void setGoodsSpecsList(List<GoodsSpecs> 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~~以上代码希望对您有所帮助~记得点赞支持哟~
更多推荐
已为社区贡献1条内容
所有评论(0)