springboot response 写出图片流 vue 解析图片流显示图片

1. 由于在用vue做图形验证码登录,然后需要后台返回图片流用作展示验证码,
   2.步骤一:
   约定vue从后台获取的请求响应为blog

getImageCode(url, params) {
        let _params
        if (Object.is(params, undefined)) {
            _params = ''
        } else {
            _params = '?'
            for (let key in params) {
                if (params.hasOwnProperty(key) && params[key] !== null) {
                    _params += `${key}=${params[key]}&`
                }
            }
        }
        return instance.get(`${url}${_params}`, {
            responseType: 'blob'
        })
    },

这里我封装成了一个promise

3.步骤二: 前端使用

//从后台获取图形验证码的数字
            getImageCode() {
                getImageCode().then(result => {
                    console.log(result);
                    if (result.status === 200) {
                        var binaryData = [];
                        binaryData.push(result.data);
                        this.imageCodeUrl = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}));
                    }
                }).catch(error => {
                    console.log(error);
                    this.$message.error("获取验证码失败,请稍后重试");
                })
            },

由于之前直接用window.URL.createObjectURL,加载响应,但是出现错误,
Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

4.步骤三:使用

<img :src="imageCodeUrl" @click="getImageCode"/>

所以在网上找了一下解决方式:
http://www.voidcn.com/article/p-qdigdjoc-btb.html