vue前端展示后端返回过来的图片-CFANZ编程社区

vue前端展示后端返回过来的图片

示例：

vue前端展示后端返回过来的图片_赋值

需求：

前端接收并展示后端返回的一个图片对象

一、存放图片盒子

<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
}

0 条评论