闲聊:
接 封装微信小程序上传图片接口需求有变化,之前上传图片后,页面中回显图片方式是:域名+'/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>