最近被支付宝小程序内嵌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函数中接收小程序传来的图片地址,进行页面渲染
文章转载于:https://www.jianshu.com/p/9995d3ba1eff
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~