解决小程序webview中无法上传图片问题

最近被支付宝小程序内嵌H5无法上传图片折磨到没脾气,H5本身上传图片没问题,但是嵌套在小程序中就无法上传。

在调试过程中发现可能是formData参数无法传送给后台造成的,试了很多解决方法都不行,最后只能利用web view通信方法以及与支付宝API相结合来解决。

首先,在H5上传图片时调用my.chooseImage方法:

my.chooseImage({
  chooseImage: 1,
  success: res => {
    const path = res.apFilePaths[0];
    // 成功后将路径发送给小程序
    my.postMessage({'filePath':path})
  }
})

由于在H5中无法使用my.uploadFile方法,所以上传至后台操作需要在支付宝小程序中进行
支付宝小程序接收到路径后,调用my.uploadFile方法进行图片上传

 my.uploadFile({
   url: apiUrl, // 自己的后台地址
   fileType: 'image',
   fileName: 'file', // 参数key值
   filePath: path,
   headers:{
     'accesstoken':app.token  
   },
   success: res => {
     var result = JSON.parse(res.data);
     my.showToast({
       type: 'success',
       content: '上传成功',
       duration: 1000,
     });
     // 向H5发送图片路径
     this.webViewContext.postMessage({'backImgUrl': result.data.url});
   },
   fail: function(res) {
     my.showToast({
       type: 'success',
       content: '上传失败',
       duration: 1000,
       success: () => {
       },
     });
   },
 });

最后,在H5 my.onMessage函数中接收小程序传来的图片地址,进行页面渲染

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容