选图方案

方案1：使用 Android 原生 Webview

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

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

这种方案存在以下问题：

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

方案2：使用 mPaas 的 H5 容器

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

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

这种方案就是利用 H5 容器提供的自定义 jsapi 的能力，自定义一个选图的 jsapi，然后前端去调用，去唤起 Native 自己实现的选图页面，最后结果通过 base64 的形式返回给前端做显示。这样就解决了前面提到系统选择文件不可控的问题。

但是当这个方案上线后，还是遇到了一些问题，主要因为通过 jsbridge 只能返回 json，所以图片数据是通过 base64 的形式返回的。但是因为有多选的场景，如果用户选择了多张图片后，返回的 base64 数据会特别大，导致在一些低端设备上有一些 OOM 的问题，同时大量 base64 转 JSON 的过程中，也会出现 ANR。所以也是不能上线的。

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

为了解决前面提到的返回 base64 存在的稳定性问题，所以我们在选图的时候，是返回了一个本地的地址，然后 Native 模块拦截 WebView 的资源访问，去本地拿到对应的图片返回给 WebView 显示。

比如选图后返回给 WebView 的地址是：https://www.mPaas.com.cn/mpaas.jpg，www.mPaas.com.cn 是我们自定义的一个域名，我们拦截这个特定自定义域名，然后去本地相册去找 mpaas.jpg对应的图片拦截返回。通过这样的一个转换逻辑，解决了 base64 传递的问题。

文件上传方案

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

方案1：使用 RPC 接口上传

对于使用了 mPaas 的用户，第一步想到的肯定是通过 RPC 接口实现文件的上传，但是在实际验证过程中，我们发现对于一些比较大的图片上传，RPC 接口直接返回了 403 的报错：Http Transport error[413] : Request Entity Too Large]. 很明显是因为文件过大导致服务端挂掉了。

主要因为 RPC 的定位是用做业务数据通道，一般建议的大小是 200K 以内，对于直接上传大文件的数据，会有稳定性风险，甚至因为这个把整个网关打挂。

方案2：使用 OSS 方案上传

对于类似的文件上传场景，建议是直接使用 OSS 的方案进行上传，比如常见的阿里云 OSS 方案：help.aliyun.com/product/31815.html。

OSS 是专门为解决文件存储整条链路设计的一套方案，解决了文件上传的各种场景，用户可以集成对应的 Android 和 iOS 的 SDK 实现对本地文件的上传。

作者：荣阳

原文链接

本文为阿里云原创内容，未经允许不得转载

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

axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
H5图片预览及上传（WEB前端）
H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧. 一.html布局文件 html有一个自己的上传文件控件- ...
【微信小程序】图片选择、转码、压缩、预览、上传，file与base64
0 前言微信小程序中,上传图片,如标题,涉及图片选择.图片转码.图片压缩.图片预览.图片上传等 1 图片选择需要使用微信提供的wx.chooseMedia chooseImage() {var t ...
uni-app——开发微信小程序因超过2MB限制无法打包预览、上传
分包技术一.小程序对大小的限制二.问题描述 1.描述 2.问题原因三.解决方法 1.减少项目的大小的方法 2.分包技术 2.1 分包依据 2.2 分包步骤四.相关知识点补充(pages.jso ...
移动端HTML5 文件预览及上传
本文主要介绍使用HTML5 图片上传及上传前的预览.本人是做PHP后端的,由于前端有时也需要自己写,有空就研究了下图片上传预览,写的都是原生代码,废话不多说,直接上代码. 前端代码 <!DOCT ...
网页上传图片时，直接本地预览无需上传服务器
最近在做一个项目时遇到上图片需要预览功能,在做的时候我们在服务器url预览和本地直接预览两种方式中做了选择,最后敲定使用本地直接预览.原因是如果等到上传完毕之后再返回图片URL给用户预览,一旦 ...
java 上传文件及预览_SpringBoot上传下载文件及在线预览
SpringBoot上传下载文件及在线预览今天大概就说说如何使用SpringBoot进行上传和下载以及在线预览文件本篇主要介绍上传下载的功能,对于界面就简单一点,大致如下: 一.老规矩还是先看看小 ...
element upload预览_element-ui上传组件图片默认不上传显示图片缩略图
新入职公司,新团队实训练手项目,后端没有提供单独的图片上传接口,需要用form/data 形式表单字段和图片文件一起提交,element UI 的上传组件默认需要启用action. 在选取图片文件后为 ...
利用第三方API实现文件在线预览/编辑/上传/下载等功能
个人的需求是想做一些在线预览编辑之类的事情,这里我使用了第三方(永中软件)的云编辑API接口,其支持doc/docx,ppt/pptx,xls/xlsx文件,需要先进行注册. 具体步骤如下: 一.先需 ...

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