记微信小程序图片无法直接使用HTTP地址或GET方法时展示与预览问题,base64
背景
目前在着手做一个微信小程序项目,由于第一次接触小程序,以及限制条件较多,因此遇到了一些较为难搞的问题。
问题描述
由于内部限制,所有后端接口的请求必须携带某个header参数,以标识请求来源(硬性要求),在查看微信开放文档后,就出现了以下几个问题:
Image标签展示
image标签的问题比较好处理,一般在src中放的是http地址,但在这项目中无法直接给出链接,只需要在js中请求到base64数据后赋给src即可。
wx.previewImage预览
预览的问题比较麻烦,官方文档的主要参数如下,没有给我们的请求地址提供塞header的地方。
wx.previewImage({ current: \'\', // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表 })
以下分两种情况考虑:
第一次上传
比较好理解,利用小程序的chooseImage方法获取到临时文件目录,然后previewImage方法中直接浏览本地目录文件地址即可。
choosePhoto: function (e) { var _this = this; wx.chooseImage({ count: 4, sizeType: [\'compressed\'], sourceType: [\'album\', \'camera\'], success: function (res) {
// 临时地址 var tempFilePaths = res.tempFilePaths; var imgs; tempFilePaths.forEach(function (e) { imgs.push(e); }); _this.setData({ imgs: imgs }); } }); },
详情预览
详情稍微复杂一点,由于无法直接获取到图片地址,后台通过接口获取到的图片的base64编码后的数据。
此处先调用wx.base64ToArrayBuffer方法,将base64转换为buffer,然后将文件储存到微信本地目录下,再通过获取到的本地地址进行浏览。
存在的问题是会占用微信本地缓存,可能后续需要进行文件的删除处理。(6月24日更新:PC版微信更新至最新版本后无法写入二进制文件,不知道是什么问题,这改成直接写入base64,其实我也不记得为什么当初不直接写base64了hhhh)
previewPhoto: function (e) { var name = e.currentTarget.dataset.name; var base64 = this.data.imgs; // 取代到base64的前缀,此处转换不需要前缀 var data = url[e.target.dataset.index].replace(\'data:image/jpeg|png|jpg|png;base64,\', \'\'); wx.showLoading({ title: \'加载中\', }) // var arrayBuffer = wx.base64ToArrayBuffer(data); let fs = wx.getFileSystemManager(); // 临时地址 const filePath = `${wx.env.USER_DATA_PATH}/${name}${e.target.dataset.index}.png`; // 将buffer写入本地地址 fs.writeFileSync(filePath, data, \'base64\'); wx.hideLoading(); // 预览本地临时文件 wx.previewImage({ current: filePath, urls: [filePath] }); // 删除本地文件 // fs.unlinkSync(filePath); },
setData赋值
未解决,小程序之前限制每次set数据不得超过1024kb,但是base64数据可能会超过此大小,虽然现在好像并非强制,但是目前也只能尽量压缩文件。
- 上一篇 »微信小程序 图片加载失败处理方法
- 下一篇 »微信小程序图片的比例问题