标签：qs Vue stringify 图片下载 param ids JSON let 本地

需求：

将勾选的列表项的id传给后台，让后台处理并下载对应的图片

1、 后台接口：

下载图片zip：

GET  	        /download
请求数据类型  	application/x-www-form-urlencoded	响应数据类型[ "*/*" ]

请求参数：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。