图片三种访问方式:
1. 返回的是图片url字符串 src=“http://xxxxx.jpg”
2. 返回的是图片类型的文件流 返回contentType的是image/png类型的,就new Blob对象,然后取blob对象中的url,图片上传组件选取本地图片能显示图片用的是该原理
3. 返回的是图片的二进制缓冲流,contentType为arrayBuffer,因为二进制是最原始的数据,所以可以转成任意流存储,如图片类型的文件流,图片的base64
小程序没用第二种方式是因为小程序没有Blob这个对象,所以图片只能是arrayBuffer(二进制缓冲流)转成base64然后访问
以下为uniapp项目中封装的方法
后端返回的路径,拼成需要的格式,再将url转成base64
//获取图片二进制数据
export const getImageBase64 = ({ url, id }) => {let baseUrl = REQUEST.BASE_URLreturn new Promise((resolve, reject) => {uni.request({url: `${baseUrl}${url}?id=${id}`,header: {userMiniAccessToken: uni.getStorageSync('accessToken'),'content-type': 'application/json'},responseType: 'arraybuffer',method: 'GET',success: function (res) {resolve('data:image/png;base64,' + uni.arrayBufferToBase64(res.data))},fail: function (err) {reject('')}})})
}// 调用getImageBase64({url: '/auth/show/photos/ua',id: item.id}).then(res => {console.log('拿到图片路径',res)})
微信小程序端
export const imageBase64 = (id) => {console.log(app.globalData.imgHost + '/api/auth/show/photos/ua?id=' + id);return new Promise((resolve, reject) => {wx.request({url: app.globalData.imgHost + '/api/auth/show/photos/ua?id=' + id,header: {userMiniAccessToken: wx.getStorageSync('accessToken'),'content-type': 'application/json',},responseType: 'arraybuffer',method: 'GET',success: function (res) {resolve('data:image/png;base64,' + wx.arrayBufferToBase64(res.data))},fail: function (err) {reject('')}})})
}// 使用async channelBusinessCheck() {let res = await accCenter.supplierBusinessCheck()let { code, message,data } = res.dataif (code == 2000) {let certificateList = []for (let i = 0; i < data.certificate.length; i++) {console.log(imageBase64(data.certificate[i].id));let obj = {name: data.certificate[i].fileNid,url: await imageBase64(data.certificate[i].id),type: 'image',fromNet: true,}certificateList.push(obj)}data.certificateList = certificateListthis.setData({formData: data,})} else {wx.showToast({title: message || '程序出错啦',icon: 'none',})}},
将拼好的路径通过封装的方法发get请求
最终得到的base64格式图片如下: