❶ 技术干货 | “选图预览并上传”的场景如何解全网最全方案汇总来了
针对“选图预览并上传”的场景，以下是最全的优化方案汇总：
选图预览方案：
使用Android原生WebView：
- 通过前端<input type="file">标签实现选择文件上传。
- 自定义扩展WebChromeClient的openFileChooser或onShowFileChooser方法，以唤起系统文件选择器。
- 注意返回的URI格式多样，需进行统一处理。
利用mPaaS的H5容器：
- 内置了唤起文件选择器的操作，但存在系统选择器不可控的风险。
- 部分客户可能对文件选择界面不满意。
实现JSAPI唤起Native自定义选图页面：
- 利用H5容器的自定义JSAPI功能，自定义选图页面。
- 前端调用唤起Native界面，结果以Base64形式返回。
- 解决了系统选择文件的不可控问题，但需注意低端设备OOM问题和大量Base64转JSON引发的ANR问题。
选图返回本地路径，WebView拦截访问本地资源：
- 选图后返回本地路径，Native模块拦截WebView访问本地资源。
- 实现本地图片加载显示，采用自定义域名进行资源拦截。
- 解决了Base64传递数据过大导致的问题。
文件上传方案：
使用RPC接口上传：
- 通过mPaaS的RPC接口上传文件。
- 遇到文件过大导致服务端报错的稳定性问题，且对大文件上传存在风险。
使用OSS方案上传：
- 推荐直接使用OSS方案上传文件。
- OSS专门解决文件上传场景，用户集成对应的SDK即可实现本地文件上传。
- 适合解决各种文件上传需求，具有较高的稳定性和可靠性。
综上所述，在选择选图预览和文件上传方案时，需根据具体需求和场景进行权衡，选择最适合的方案进行实现。
❷ web前端上传图片的几种方法
下面给你介绍3种web前端上传图片的方法：
1.表单上传
最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。
ajax无刷新上传
Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。
3.各类插件上传
当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等，这时传统的表单上传很难实现这些功能，我们可以借助现有插件完成。
如网络上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等，大家可根据项目实际需求选择适合的插件。