h5上传图片并预览

1. 技术干货 | “选图预览并上传”的场景如何解全网最全方案汇总来了

针对“选图预览并上传”的场景，以下是最全的优化方案汇总：

选图预览方案：

1. 使用Android原生WebView：

   • 通过前端<input type="file">标签实现选择文件上传。
   • 自定义扩展WebChromeClient的openFileChooser或onShowFileChooser方法，以唤起系统文件选择器。
   • 注意返回的URI格式多样，需进行统一处理。

2. 利用mPaaS的H5容器：

   • 内置了唤起文件选择器的操作，但存在系统选择器不可控的风险。
   • 部分客户可能对文件选择界面不满意。

3. 实现JSAPI唤起Native自定义选图页面：

   • 利用H5容器的自定义JSAPI功能，自定义选图页面。
   • 前端调用唤起Native界面，结果以Base64形式返回。
   • 解决了系统选择文件的不可控问题，但需注意低端设备OOM问题和大量Base64转JSON引发的ANR问题。

4. 选图返回本地路径，WebView拦截访问本地资源：

   • 选图后返回本地路径，Native模块拦截WebView访问本地资源。
   • 实现本地图片加载显示，采用自定义域名进行资源拦截。
   • 解决了Base64传递数据过大导致的问题。

文件上传方案：

1. 使用RPC接口上传：

   • 通过mPaaS的RPC接口上传文件。
   • 遇到文件过大导致服务端报错的稳定性问题，且对大文件上传存在风险。

2. 使用OSS方案上传：

   • 推荐直接使用OSS方案上传文件。
   • OSS专门解决文件上传场景，用户集成对应的SDK即可实现本地文件上传。
   • 适合解决各种文件上传需求，具有较高的稳定性和可靠性。

综上所述，在选择选图预览和文件上传方案时，需根据具体需求和场景进行权衡，选择最适合的方案进行实现。