示例:
需求:
前端接收并展示后端返回的一个图片对象
一、存放图片盒子
<el-dialog title="图片" :visible.sync="dialogVisible2">
<span class="span"><img :src="content"/></span>
</el-dialog>
二、定义变量,存放接收到的图片地址
data() {
return {
content:'',
}
}
三、定义请求的接口
重点是添加 responseType: 'blob'
,表明这是个blob对象。
不加这个类型,会报错TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
(定义接口的形式类似,取决于自己如何封装接口)
getUrl: {
url: '/xxxxxx/qrcode', // 请求接口的路径
method: 'get', // 请求方法
responseType: 'blob', // response类型
params: {} // 入参
},
四、请求接口并赋值
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 |
这里已将axios封装
//在vue原型对象上挂载axios,让vue的每一个组件都能通过this直接访问到$http,从而发起Ajax请求
Vue.prototype.$http=axios
getData() {
this.$http.getUrl({ // 请求刚刚定义的接口
params: { // 入参
name: '奶绿走糖',
id: '9999'
}
}).then(res=>{ // 获取返回参数res
let url = window.URL.createObjectURL(res.data); // 获取对象url
this.content = url // 给变量赋值
})
}
另一种写法:
async getData() {
let params = {
name: '奶绿走糖',
id: '9999'
}
let res = await this.Api.getUrl(params) // 获取后盾返回的参数res
let url = window.URL.createObjectURL(res.data); // 获取返回参数中的需要的值data
this.content = url // 把获取到的值,赋值给变量qrcodeSrc
}