axios妙用：ios下支付宝小程序webview内嵌H5页面上传图片解决方案

这几天项目上遇到一个问题，就是使用webview的方式嵌入同一套H5页面代码，在微信小程序里可正常运行，在APP中可正常运行，但是在ios端的支付宝小程序中所有传参为formdata形式的接口都会有问题，后端无法取到formdata中的数据，而安卓端是正常的。 翻阅了支付宝小程序官网上对webview内嵌H5上传图片的部分，发现写着大大的：不支持

看了许多网上的解决方案也都似乎没有解决方式，都是利用了webview和H5页面通信的方式来解决，可是我们的H5页面是嵌入到第三方的小程序里webview的，如果要修改webview的通信这种方式，势必要麻烦第三方来配合，且不说人家愿意与否，自己也会觉得不好意思。

还是不死心，想弄清楚安卓下和ios下传的参数区别到底在哪里，于是加了VConsole调试工具。 以下是安卓下的参数：

以下是ios下的参数：

又看了其他几个ios下传formdata参数的接口，参数都是统一的形式，被拆分成了：

{
    realFormData: {},
    appendData: [{...}]
}
复制代码

这个形式是对于传参加了一层封装，怪不得后端按照接口约定取不到值了。 既然找到这个原因，那能不能从参数入手呢？ 忽然想起axios是可以在请求发送前对参数进行修改的，利用 transformRequest 配置项。

那可以先在该配置项中打印一下参数是不是已经被支付宝小程序加了那层封装，如果在这里看到的参数是已经被封装过的那就好办了，只要进行拆分，拆分为原本的数据格式，那就能按照拆分后的格式发送出去了。 经过测试，果然在transformRequest里已经是封装过的参数了。 并且重新组装参数后，后端可以正常接受参数，取值，返回正确数据了，太开心了！

最终解决方案如下：

原本调用接口传参方式，由传递formdata格式，改为直接传递普通数据，在transformRequest中组装formdata参数：

改为：

最后想问下，不知道为何ios下支付宝小程序对webview里H5传递formdata的参数会加一层封装，有明白的大佬吗？ 而且官方文档里说不支持上传图片，是不是就因为这个封装的问题呢？ 是不是只能用axios来hack这个问题呢？还有其他方式吗？