vue：前端接收并展示后端返回的一个图片对象（文件流）

需求：

前端接收并展示后端返回的一个图片对象（文件流），没有图片的时候，显示默认图片。

1. HTML

造空间，展示图片

	<div id="qrcode" class="qrcodeBox" ><img :src="qrcodeSrc"/>div>

2. 定义变量

这里require的作用是设置默认图片。

 	data () {return {qrcodeSrc: require('@/assets/images/img_empty.png')}},

3. 定义请求的接口

重点是添加 responseType: 'blob'，表明这是个blob对象。

不加这个类型，会报错TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

（定义接口的形式类似，取决于自己如何封装接口）

  getQrcode: {url: '/xxxxxx/qrcode',	// 请求接口的路径method: 'get',			// 请求方法responseType: 'blob',		// response类型params: {}				// 入参},

4. 请求接口并赋值

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

getData() {this.Api.getQrcode({	// 请求刚刚定义的接口params: {			// 入参name: '奶绿走糖',id: '9999'}}).then(res=>{			// 获取返回参数reslet url = window.URL.createObjectURL(res.data);		// 获取对象urlthis.qrcodeSrc = url	// 给变量赋值})
}

另一种写法

async getData() {	let params = {name: '奶绿走糖',id: '9999'}let res = await this.Api.getQrcode(params)			// 获取后盾返回的参数reslet url = window.URL.createObjectURL(res.data);		// 获取返回参数中的需要的值datathis.qrcodeSrc = url								// 把获取到的值，赋值给变量qrcodeSrc
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！