图片转base64格式；处理后台返回的文件流显示图片

一、 base64

1. 安装插件

npm i image-tools --save

2. 在使用的页面中导入依赖

import { pathToBase64, base64ToPath } from 'image-tools'

3. 封装函数

//把图片转换成base64
	function imgToBase64(data) {
		return new Promise((resolve, reject) => {
			pathToBase64(data).then(base64 => {
				resolve(base64)
			}).catch(error => {
				console.error(error)
				reject(error)
			})
		})
	}

4. 调用函数，在返回图片路径url的地方调用函数转换为base64格式

imgToBase64(res.tempFilePaths[0]).then(base64 => {
					console.log("[转换成base64]", base64)
					// state.file = base64.replace(/^data:image\/\w+;base64,/, "")
					state.file = base64
				})

二、 文件流

1、处理响应的数据类型 responseType:‘blob’

export function GetFobImage(id:any) {
    return httpRequest({
		url: '/Investigate/GetFobImage?id='+id,
		method: 'get',
		responseType:'blob' // 返回文件的类型
	})
}

2、调用接口，将文件流blob转换为url地址

GetFobImage(row.id).then((res) => {
    const blob = new Blob([res], { type: res.type }); // 保存文件流为 Blob
    state.fobImg = URL.createObjectURL(blob); // 转换 Blob 为 URL
  });