uniapp中回显后端返回的图片文件

37 阅读1分钟

闲聊:

封装微信小程序上传图片接口需求有变化,之前上传图片后,页面中回显图片方式是:域名+'/files/uploads/' + 上传接口返回的图片位置,现在要改成 get 请求获取图片接口,后端返回图片文件,不能直接拼地址回显图片了,但返回的文件需做以下处理后才能显示

上代码:

js代码:

获取图片地址:

let res = await upLoad.uploadPic(1, this.TID);
if (res.length == 1 && res[0].Code == 500) {
    return;
}
let _imgA = res.map((item) => item.Body.path);

因需求将原来的上传改成了一次只能上传一张图,所以转图时也是传一张转一张

const _imgBase = await this.getImageFun(_imgA[0]);
this.imgBaseList.Sfzrxm = _imgBase;
getImageFun(imgPath) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASEURL + '/files/uploads/' + imgPath,
			data: {},
			responseType: 'arraybuffer',
			method: 'get',
			header: {
				cookie: uni.getStorageSync('sid') ? 'febersecurityid=' + uni.getStorageSync(
					'sid') : ''
			},
			timeout: 1200000, //120s
			success: (res) => {
				const imgBase =
					`data:image/jpeg;base64,${uni.arrayBufferToBase64(res.data)}`;
				resolve(imgBase);
			},
			fail(res) {
				wx.showToast({
					icon: 'none',
					duration: 3000,
					title: '图片获取失败'
				});
			}
		});
	});
}

页面中:

<image v-if="imgBaseList.Sfzrxm" :src="imgBaseList.Sfzrxm" @click="deleteImg('sf1')"></image>