解决小程序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函数中接收小程序传来的图片地址，进行页面渲染

本文章由javascript技术分享原创和收集