钉钉小程序base64图片预览

思无及

已于 2022-10-26 20:27:13 修改

阅读量890

点赞数

分类专栏：钉钉小程序文章标签：钉钉小程序 javascript

于 2022-10-25 20:00:36 首次发布

本文链接：https://blog.csdn.net/weixin_42471898/article/details/127520421

版权

钉钉小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

钉钉小程序直接预览base64图片会报错，需要先将Base64图片临时保存入手机后，通过临时地址预览，代码如下：

经过测试，模拟器不能预览base64图片，会报错提示只支持 http 图片链接，可用下面方法进行缓存预览
但是！真机上，缓存图片预览会显示图片不存在，但是用fileManager.access验证又显示文件存在，但是预览不出来…
去掉缓存代码后发现，真机可以直接预览base64格式图片。（吐血）不过一切肯定以真机为主.

previewPic(e) {
    let url = e.currentTarget.dataset.url;

    if (url.indexOf('base64') > -1) {
      var imgPath = dd.env.USER_DATA_PATH + '/e-invoice' + Date.parse(new Date()) + '.png';
      var imageData = url.replace(/^data:image\/\w+;base64,/, "");
      var fileManager = dd.getFileSystemManager();
      fileManager.writeFile({
        filePath: imgPath,
        data: imageData,
        encoding:'base64',
        success: (res) => {
          url = imgPath;
        }
      })
    }

    dd.previewImage({
      current: 0,
      urls: [url],
    });
  }

每次进入页面时删除之前的缓存

onShow(){
	//删除本地临时缓存图片
    let fileManager = dd.getFileSystemManager();
    fileManager.stat({
      path: `${dd.env.USER_DATA_PATH}`,
      recursive: true,
      success: (res) => {
        for (let i in res.stats) {
          if (i.split('/').length > 0 && i.split('/')[1] != '') {
            fileManager.unlink({
              filePath: `${dd.env.USER_DATA_PATH}` + i,
              success(res) {
                console.log(res)
              },
              fail(err) {
                console.error(res)
              }
            })
          }
        }
      },
      fail: (err) => {
        console.log(err)
      }
    })
}