关于在uniapp中,图片需要用到token权限才能查看

 在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)
					}
				})
			}

 

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值