在小程序里 wx.canvasToTempFilePath 属于异步函数,
在保存图片时候会出现canvasToTempFilePath的方法会执行完毕,就会掉后端得上传图片接口,出现真机报错,调试没有问题得现象。
再多次尝试后,发现 wx.canvasToTempFilePath 保存得文件是一个临时文件路径,那么我们是不是可以用 wx.getFileInfo(Object object) 这个api 来获取图片 ,当然这里还有一个坑,我说了wx.canvasToTempFilePath 属于异步函数,所以我们可以使用递归得方法来获取图片走后端上传接口
代码示范:
this.data.ctx.draw(true,function(){
// 进入回调函数
// 再这里我们需要处理导出图片
// wx.canvasToTempFilePath 属于异步函数 我们加一个倒计时
setTimeout(()=>{
wx.canvasToTempFilePath({
canvasId: 'handWriting', // canvas id
fileType: 'png',
quality: 1, //图片质量
success(res) {
var nums =0; //我们来记录递归得数量
var getFiles=()=>{
// 这里我们获取临时文件 看看是否存在
wx.getFileInfo({
filePath: res.tempFilePath, // 这里是导出得图片路径
success(files) {
if (files.errMsg == "getFileInfo:ok") {
//如果获取成功 这里就可以实现上传代码
wx.uploadFile({
url: 'https://www.xxx.com/upload', // 仅为示例,非真实的接口地址
filePath: res.tempFilePath,
name: 'imgFile',
formData: {
user: 'test'
},
complete:function(files){
// 无论成功失败 都会触发 所以在这里写再合适不过了
// 我用五次来做验证 如果5次递归里能获取到
if (nums<5){
nums+=1;
if (files.errMsg == "uploadFile:ok") {
wx.showToast({
title: '上传成功',
})
}else{
getFiles();
}
}
}
}
}
}
getFiles(); //执行递归函数
}})
},500)
}()).