Vue中实现图片下载到本地功能

需求：

将勾选的列表项的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 } //这是一个对象，注意键名也是可以使用引号包裹的

标签：qs,Vue,stringify,图片下载,param,ids,JSON,let,本地
来源： https://blog.csdn.net/weixin_53791978/article/details/122472850