处理后台返回流文件，多张图片处理，返回成一个压缩包



处理方法：





let blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
let fileName = decodeURI(res.headers['content-disposition'].split('filename*=utf-8')[1])
if (window.navigator.msSaveBlob) {
	// ie
    window.navigator.msSaveOrOpenBlob(blob, fileName)
     return
}
let elink = document.createElement('a')
elink.style.display = 'none'
elink.href = window.URL.createObjectURL(blob)
elink.download = fileName
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)


就可以下载成一个压缩包了哦

单张图片下载（相当于浏览器下载）



this.$http.post( --接口名---, data, { responseType: 'arraybuffer' })
   .then(response => {
      return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    })
    .then(data => {
      var link = document.createElement('a')
      link.href = data
      if (imgsrc.indexOf('.jpg') != -1) { // 判断图片格式，非jpg格式，都已png格式显示
        link.download = name + '.jpg'
      } else {
        link.download = name
      }
      link.click()
    })

问题背景
 在做员工系统时，前端传递图片文件给后端，后端返回的图片路径为姓名+员工部门，此时重新以当前员工身份传递图片时，后端返回的路径仍然为当前员工姓名与员工部门，此时我们传递的新图片已经保存到了后端数据库中。因为后端返回的图片路径不变，导致前端图片不会重新请求数据。
解决办法
 我们需要使图片路径不完全相同，才会使得img标签会重新请求新的图片，这时我加入了随机数进行更改图片的完整路径，但不影响图片向真正的地址去请求数据。

代码：
 		/* 上传头像成功时的回调 */
        handleAvatarSuccess(res, file) {
            console.log(res,file)
            if(res.code == 200){
                this.$message.success("上传成功")
            }
	 		//在请求到的图片路径后方加入随机数，使得每次渲染的完整图片路径都不相同，使得图片重新加载
            this.imageAvatarUrl = res.data + '?'+ Math.random();
            
        },

 问题解决~

vue显示多张图片-接收后端数据

后端返回字段如下



可以看见，每张图片的相对路径我用逗号拼接。
前端接收主要代码

<ul style="padding: 3px">
          <li class="imgsh" id="imgUrls"><img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) "></li>
           <!--<li><img src="../../../image/video_pic/13163000.jpg"></li>-->
           <!--<li v-for ="item in imgurls" :key="item.url">-->
               <!--<img :src="item.url" alt="imgurls">-->
               <!--&lt;!&ndash;<p>{{item.CnName}}</p>&ndash;&gt;-->
           <!--</li>-->
</ul>

<img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) ">

src中主要是在vue的目录下建立了文件夹image，再在image下面建立video_pic。要存在vue的根目录才行。网上很多代码直接用变量访问**"…/…/image"** 这种类型的路径，也不知道他们是怎么成功的，反正我没有成功。

直接在src中这样访问当然没有问题，但是一旦加入变量根本不行，我找了好多资料，自己搞了半天才发现必须加require字段才行。不吐槽了

前端接收后端代码

getPicPath(this.sizeForm.hospitalcard)
   .then(response => {


      this.imgurls = response.data.split(',');
       console.log( this.imgurls);
       // const target = {};
       // let indexs = 0;
       // imgtemp.forEach(a=>{
       //     // console.log(a);
       //     const source = JSON.parse(`{"${indexs}":"${a}"}`);//造出对象
       //     indexs++;
       //     Object.assign(target,source);
       // });
       // console.log(target);

   })

我的代码进行整合了的，大家测试可以利用axios,直接访问后端端口的接口，比如：



这样就能成功了，保证能行。贴上我的效果图



4. 还有一种就是针对图片少的时候返回base64码的情况，后端当然是直接返回图片的base64码了。

前端是这样的
 <ul>
        <li class ="img_iden" id="imgUrl"></li>
  </ul>

在方法里面，接收返回的数据进行显示，代码为
// let imgurls =[];
            // imgurls = res.data.imgUrl.split(",");
            // for(let i=0;i<imgurls.length;i++){
            //     let img=new Image();
            //     img.src ="data:image/jpg;base64,"+imgurls[i];
            //     console.log(img.src);
            //     img.style.width = 148+"px";
            //     img.style.height = 148+"px";
            //     let imgContainer=document.getElementById("imgUrl");
            //     imgContainer.appendChild(img);
            // }

这段代码是可行的，只不过我不用这种方法了，就把它注释掉了。因为base64码太长了，我不好调试，占一大块屏幕。

vue端

1、在 main.js 文件中添加

const upload = axios.create({
  //这里配置你自己的url
  baseURL: 'http://localhost:8096/reconciliation/',
  timeout: 50000,
});
Vue.prototype.$upload = upload;

2、在需要上传文件的vue文件中

uploadImg(file){
    var _this = this;
    var formData = new FormData();
    formData.append("file", file.raw);
    _this.$upload.post("file/upload", formData)
    	.then(res => {
		    _this.$message(res.data.userInfo, 'success');
	    }).catch(data=>{
		    console.log(data);
	    })
}

3、在后台controller中

@RestController
@RequestMapping("file")
public class FileDataController {
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
        // 将图片转为base64
        BASE64Encoder encoder = new BASE64Encoder();
        String imgData = encoder.encode(file.getBytes());
        String url = null;
        //这里要进行的图片操作
        return url1;
    }
}