1. 背景

在金融性质的App里，选择本地相册图片或者拍照，然后预览并且上传是典型的使用场景，比如常见的身份证信息上传。在最近接触的几家银行客户里，均反馈有类似的场景，并且在使用上均或多或少的遇到一些问题，最后联系到我们，希望提供一些最佳实践。在这里分享下对应场景的一些优化解决方案。

2. 方案介绍

先介绍下各个银行的传统方案都是怎么做的，以及存在的问题。

2.1 选图方案

2.1.1 方案1：使用Android原生Webview

方案介绍：前端通过input标签，指定type=file，通过原生webview的支持实现选择文件。
Android原生webView并不支持选择文件上传，需要外壳自己扩展WebChromeClient里的openFileChooser或者onShowFileChooser，然后去唤起系统选择文件弹框，选择文件会使用系统提供的组件或者其他支持的app，返回的uri有的直接是文件的url，有的是contentprovider的uri，需要统一处理一下返回uri格式。这种方案存在以下问题。
1) 外壳定制实现的逻辑较多，还需要对系统不同文件选择器返回的地址做兼容，容易有兼容性问题。
2) 选择文件实现依赖系统的文件选择器，不同手机实现不一致，无法做到统一。

2.1.2 方案2：使用mPaas的H5容器

如果业务使用了mPaas的H5容器后，虽然容器内已经内置了唤起文件选择器的一系列操作，仍存在系统文件选择器不可控的风险。比如业务希望选择的是一张图片，但是唤起后的效果如下图所示，客户是无法接受的。

2.1.3 方案3：实现jsapi唤起Native自定义的选图页面

这种方案就是利用H5容器提供的自定义jsapi的能力，自定义一个选图的jsapi，然后前端去调用，去唤起Native自己实现的选图页面，最后结果通过base64的形式返回给前端做显示。如此便解决了系统选择文件不可控的问题。
但是该方案上线后还是遇到了一些问题，因为通过jsbridge只能返回json，所以图片数据是通过base64的形式返回的。但是因为有多选的场景，如果用户选择了多张图片后，返回的base64数据会特别大，导致在一些低端设备上有一些OOM的问题，同时大量base64转JSON的过程中，也会出现ANR。 所以也是不能上线的。

2.1.4 方案4：选图返回本地路径，webview拦截访问本地资源

为了解决前面提到的返回base64存在的稳定性问题，所以我们在选图时，是返回了一个本地的地址，然后Native模块拦截webview的资源访问，去本地拿到对应的图片返回给webview显示。比如选图后返回给webview的地址是：https://www.mPaas.com.cn/mpaas.jpg，www.mPaas.com.cn是我们自定义的一个域名，我们拦截这个特定自定义域名，然后去本地相册去找mpaas.jpg对应的图片拦截返回。通过这样的一个转换逻辑，解决了base64传递的问题。

2.2 文件上传方案

通过以上的描述，我们对比了各种选图方案实现的优缺点，最后沉淀了最佳实践。选图实现后，下一步就是上传。对于上传也经历了类似的方案演进。

2.2.1 方案1：使用RPC接口上传

对于使用了mPaas的用户，第一步想到的肯定是通过RPC接口实现文件的上传，但是在实际验证过程中，我们发现对于一些比较大的图片上传，RPC接口直接返回了403的报错，Http Transport error[413] : Request Entity Too Large]. 很明显文件过大导致服务端挂掉了。主要因为RPC的定位是用做业务数据通道，一般建议200K以内，直接上传大文件，会有稳定性风险，甚至整个网关打挂。

2.2.2 方案2：使用OSS方案上传

对于类似的文件上传场景，建议直接使用OSS的方案进行上传，比如常见的阿里云OSS方案，可参考文后资料了解详情[1]。OSS是专门为解决文件存储整条链路设计的一套方案，解决了文件上传的各种场景，用户可以集成对应的Android和iOS的SDK实现对本地文件的上传。

3. 总结

仅仅选图上传预览场景，便有诸多不同的方案演进，没有最好的方案，只有最合适的方案。阿里云金融线专家服务团队为金融App提供最佳解决方案，欢迎大家了解。

参考文档

[1] 阿里云OSS方案：https://help.aliyun.com/product/31815.html

我们是阿里云智能全球技术服务-SRE团队，我们致力成为一个以技术为基础、面向服务、保障业务系统高可用的工程师团队；提供专业、体系化的SRE服务，帮助广大客户更好地使用云、基于云构建更加稳定可靠的业务系统，提升业务稳定性。我们期望能够分享更多帮助企业客户上云、用好云，让客户云上业务运行更加稳定可靠的技术，您可用钉钉扫描下方二维码，加入阿里云SRE技术学院钉钉圈子，和更多云上人交流关于云平台的那些事。