项目中遇到了这个问题，在搜索过程中看到别人的博文，大多是下面这种方法，大致如下：
let imgObj = {
count: 1,
success: (res) => {
let tempFilePaths = res.tempFilePaths;
wx.request({
url: tempFilePaths[0],
responseType: 'arraybuffer',
success: function (res) {
let base64 = wx.arrayBufferToBase64(res.data);
}
});
},
fail: (res) => {
wx.showToast({
title: res,
icon:'none'
});
}
}
wx.chooseImage(imgObj);
开发者工具中是可以获取到的，但是拿手机预览或者真机调试的时候，获取base64这个方法的url是不能用临时路径的，所以这个方法也就走不通了，那么就只能借助canvas了。
首先在wxml文件中写一个canvas
<canvas canvas-id='canvas' class='canvas'></canvas>
js文件中需要引入插件upng.js
const upng = require('../../common/libs/upng-js/UPNG.js')
获取base64代码如下：
let _this = this;
let imgObj = {
count: 1,
success: (res) => {
let tempPath = res.tempFilePaths[0];
wx.showLoading({
title: '图片加载中',
mask: true,
});
//获取图片的宽高
wx.getImageInfo({
src: tempPath,
success: res => {
let ratio = 2;
let canvasWidth = res.width
let canvasHeight = res.height;
// 保证宽高均在300以内
while (canvasWidth > 300 || canvasHeight > 300) {
//比例取整
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
_this.setData({
imgWidth: canvasWidth,
imgHeight: canvasHeight
})
let canvas = wx.createCanvasContext('canvas');
// 绘制图片至canvas
canvas.drawImage(tempPath, 0, 0, _this.data.imgWidth, _this.data.imgHeight);
// 绘制完成后
canvas.draw(false, () => {
//获取图像数据
wx.canvasGetImageData({
canvasId: 'canvas',
x: 0,
y: 0,
width: _this.data.imgWidth,
height: _this.data.imgHeight,
success(res) {
// 获取png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height);
// 获取base64
let base64 = wx.arrayBufferToBase64(pngData);
},
fail(res) { },
complete(){
wx.hideLoading();
}
})
})
},
fail: res => {
wx.hideLoading()
}
})
},
fail: (res) => { }
};
wx.chooseImage(imgObj);
代码中限制了图片大小在300以内，所以只需要设置canvas的宽高大于300px即可，这样可以有效地限制绘制图片的大小以及获取到base64的大小，从而也缩短了转化base64的时间。
注：尽量还是用wx.uploadFile做图片上传，公司项目中虽然用该方法获取到了图片的base64编码，但是最终还是用uploadFile做的图片上传。
如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。