H5 选图预览到上传最佳实践-阿里云开发者社区

开发者社区> 阿里云SRE技术社区> 正文
登录阅读全文

H5 选图预览到上传最佳实践

简介: H5 选图预览到上传最佳实践

image.png

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容器后,虽然容器内已经内置了唤起文件选择器的一系列操作,仍存在系统文件选择器不可控的风险。比如业务希望选择的是一张图片,但是唤起后的效果如下图所示,客户是无法接受的。

CAB57856-C28B-4a92-B663-A4F90E38AB13.jpg

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.jpgwww.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.png

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技术学院钉钉圈子,和更多云上人交流关于云平台的那些事。

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

阿里云智能全球技术服务部SRE团队,是阿里集团高可用基础技术核心缔造团队,也是阿里为确保客户平台稳定、业务连续而打造的核心支撑团队

官方博客
官网链接