需求:
将勾选的列表项的id传给后台,让后台处理并下载对应的图片
1、 后台接口:
下载图片zip:
GET /download
请求数据类型 application/x-www-form-urlencoded 响应数据类型[ "*/*" ]
请求参数:
参数名称 | 参数说明 | 请求类型 | 数据类型 |
---|---|---|---|
ids | ids | query | array |
2、前端Vue页面:
template:
<el-button type="success" @click="dowImgZip">下载图片</el-button>
script:
import qs from "qs";//引入qs插件
data:
tableCheckList: [],
method:
dowImgZip() {
let ids = [];
if (this.shitumos == 2) {
ids = this.$refs.shitumosDialog.checkList;//获取另一个视图选中的id(根据需求决定这个是否需要)
} else {
this.tableCheckList.map(item => {//遍历获取表格的选中的id
// console.log(item.id);
ids.push(item.id);
});
}
if (ids.length == 0) {
this.$notify({
title: "提示",
message: "请勾选需要下载的图片",
type: "warning",
duration: 2000
});
return;
}
let param = {
ids: ids,
...JSON.parse(JSON.stringify(this.dataForm))
};
delete param.pageNum;//删除不要的参数
delete param.pageSize;
console.log(param);
let dataUrl = `download?` + qs.stringify(param);
window.open(dataUrl); //用window.open()实现下载到本地
},
备注:
(1)window.open()要先判断是否会被浏览器拦截
(2)qs.stringify()将对象 序列化成URL的形式,以&进行拼接
qs.stringify({ a: ['b', 'c', 'd'] }); // 'a[0]=b&a[1]=c&a[2]=d'
(3)qs.parse()将URL解析成对象的形式
(4)JSON.parse() :将JSON字符串转换成对象
(5)JSON.stringify() :将JS对象转换为JSON格式
(6)JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。
JSON:let str = '{"a":"test","b":123}' //这是一个 JSON 字符串,本质是一个字符串
JS对象:let str = { a: "test", b: 123 } //这是一个对象,注意键名也是可以使用引号包裹的