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

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

一 背景

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

二 方案介绍

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

1. 选图方案

1.1 方案1：使用Android原生Webview

方案介绍：前端通过input标签，指定type=file，通过原生webview的支持实现选择文件。

Android原生webView并不支持选择文件上传，需要外壳自己扩展WebChromeClient里的openFileChooser或者onShowFileChooser，然后去唤起系统选择文件弹框，选择文件会使用系统提供的组件或者其他支持的app，返回的uri有的直接是文件的url，有的是contentprovider的uri，需要统一处理一下返回uri格式。这种方案存在以下问题

1. 外壳定制实现的逻辑较多，还需要对系统不同文件选择器返回的地址做兼容，容易有兼容性问题
2. 选择文件实现依赖系统的文件选择器，不同手机实现不一致，无法做到统一

1.2 方案2：使用mPaas