小程序wx.canvasToTempFilePath(Object object, Object this)保存图片无法上传

在小程序里 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)
 }()).
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值