一个超级无语的bug，<image>标签渲染图片，后端给的文件url，是不带诸如.png、.jpg等附件名称后缀的地址，直接返回了https://xx.filename的文件路径，在iOS和模拟器上能正常读取照片，在安卓上就会展示空白

起初以为是没有把图片的https加入小程序配置的合法域名，
最后的解决方案，是把后端给的url图转换base64才行

哎这个坑痛心疾首，记录下

实现效果

示例图

图片上传公共方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * 本地选择的图片 - 转化为base64
 * @param {*} file uni.choseImage后拿到的path数组的第一个
 * @returns
 */
export function setBase64(file) {
  return new Promise((resolve, reject) => {
    uni.getFileSystemManager().readFile({
      filePath: file,
      encoding: 'base64',
      success: (res) => {
        resolve(res);
      },
      fail: (e) => {
        reject(e.msg);
        uni.$u.toast('图片转换失败');
      },
    });
  });
}

安卓专用图片转换方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * 网络图 转换为base64格式
 * @param {*} url
 * @returns base64 file
 */
export function fileStreamturn(url) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: url,
      method: 'GET',
      responseType: 'arraybuffer',
      header: {
        Authorization: uni.getStorageSync('token'),
        // Authorization: token
      },
      success: (res) => {
        let datas = res.data;
        let fileName = url.slice(url.indexOf('.') + 1);
        resolve(
          `data:image/${fileName};base64,` + uni.arrayBufferToBase64(datas),
        );
      },
    });
  });
}

例子

因为会出现多个<image>标签，同时转化base64有较长的等待时，所以做了当前设备判断，如果是安卓才会调用转换方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var arr = [
 'https://xxx.filename1',
 'https://xxx.filename2',
 'https://xxx.filename3',
 ...
]

    //安卓设备 - 处理图片数组
    handleImage(arr) {
      let result = [];
      if (arr && arr.length) {
        if (uni.getSystemInfoSync().platform == "android") {
          let base64 = [];
          arr.forEach((item) => {
            fileStreamturn(item).then((res) => {
              base64.push(res);
            });
          });
          result = base64;
        } else {
          result = arr;
        }
      }
      return result
    }