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 } //这是一个对象,注意键名也是可以使用引号包裹的
上一篇:python 定时发送邮件


下一篇:LNK1123: 转换到 COFF 期间失败: 文件无效或损坏