在uniapp中获得图片是不会携带token的(因为uniapp获得图片的请求没有不会走request拦截),但是后端配置了权限后,前端返回token才能查看到加密的图片
这个时候在uniapp中有2个api可以解决(推荐第二个,第一个可以跳过)
一,将图片保存为arrayfile形式,在将它转换成base64的地址在页面中显示,因为image标签只能显示绝对路径和相对路径会的base64形式的图片
// 1. 将获的图片地址再次发送一个请求,使得其携带上token,接收的数据为文件流二进制形式
export function getImgURLOfBase64(url) { // 获得的图片地址
return request({
url: url,
method: 'get'
})
}
// 2.将请求的图片地址转换成 arrayBuffer
strToArrayBuffer(url) { // 获得的文件流二进制
var i = url.length;
var n = 0;
var ba = new Array()
for (var j = 0; j < i;) {
var c = url.codePointAt(j);
if (c < 128) {
ba[n++] = c;
j++;
} else if ((c > 127) && (c < 2048)) {
ba[n++] = (c >> 6) | 192;
ba[n++] = (c & 63) | 128;
j++;
} else if ((c > 2047) && (c < 65536)) {
ba[n++] = (c >> 12) | 224;
ba[n++] = ((c >> 6) & 63) | 128;
ba[n++] = (c & 63) | 128;
j++;
} else {
ba[n++] = (c >> 18) | 240;
ba[n++] = ((c >> 12) & 63) | 128;
ba[n++] = ((c >> 6) & 63) | 128;
ba[n++] = (c & 63) | 128;
j += 2;
}
}
return new Uint8Array(ba); // 返回这个地址
},
// 3. 将返回的arrayBuffer文件转换成base64的形式
const base64 = uni.arrayBufferToBase64(arrayBuffer)
但是这个方法对获得的图片大小有要求,太大就会超时
二,直接将获得的图片使用uni.downloadFile API下载下来,拿到临时路径渲染
getImgURLOf(imgUrl) {
const res = '请求到的图片地址'
console.log(res, 'res')
let img = []
uni.downloadFile({
url: res,
header: {
'Authorization': 'Bearer ' + getToken()
},
//下载地址,后端接口获取的链接
success: (data) => {
console.log(data.tempFilePath, 'data.tempFilePath')
console.log(data, 'dataaaaaaaaaaaaaaaaaaaaaaaaaaaa')
// 直接return的话,会返回一个promise
img.push(data.tempFilePath)
}
})
}