Webview中h5上传图片踩坑记录

前段时间开发端内h5项目，用到了h5上传图片，现记录下遇到的坑。

端内h5上传图片问题归纳：
1、Webview中使用原生h5 input file上传图片时android只能单选、ios只能多选；android上还存在的一个问题为：点击上传按钮进入图片选择页后，如果取消选择，返回项目，则无法再次上传，会波及到整个webview，其他h5页面也无法上传，只有关闭此webview重新进入才可以上传——此问题需端原生修改方法覆盖；
2、Jsdk chooseImage方法选择图片，android选择相册和拍照时无返回数据；
3、Android部分机型（Galaxy S8 Android 7.0）上传图片数量过多时导致整个app奔溃、重启——此问题是webview申请渲染内存失败导致，端原生添加android:hardwareAccelerated=“false”配置，关闭硬件加速后解决；

上传图片建议：
1、交互优化：缩略图与预览图分别展示，选择后即上传，上传完成后显示网络图片；本地缩略图使用压缩后base64，上传完成后使用又拍云配置url!percent20(需根据配置确定)
2、上传File文件格式：建议使用File格式上传，因为文件转为base64后大小会变为原来的4/3倍
3、前端适当压缩：压缩会增加部分处理时间、减低清晰度，但可以减少上传时间、回显时间，提升用户体验，具体可根据项目情况确定，以下为不同压缩比例清晰度对比，可供参考(办公wifi)：

压缩比例	压缩清晰度（canvas）	图片	尺寸	大小	上传时间	上传格式	缩略图	尺寸	大小
100%	-	图片	3264*2448	2.75MB	6.5s	File	图片	652*489	111.08KB
91.6%	0.8	图片（原图-同上）	3264*2448	3.3MB	上传失败，server对图片大小限制缘故	Base64	-	-	-
100%	1	图片	2000*1500	4.11MB	上传失败，server对图片大小限制缘故	Base64	-	-	-
28.6%	0.8	图片	2000*1500	1.03M-754.93 KB	2.2s	Base64	图片	400*300	43.73KB
13.1%	0.5	图片	2000*1500	515.04KB-369.38 KB	1.4s	Base64	图片	400*300	43.77 KB
7.1%	0.3	图片	2000*1500	280.21 KB-202.35 KB	979ms	Base64	图片	400*300	44.31 KB
4.9%	0.1	图片	2000*1500	190.39 KB-138.56 KB	763ms	Base64	图片	400*300	43.95 KB
12.4%	0.8	图片	1500*1125	493.32 KB-351.12 KB	1.3s	Base64	图片	300*225	25.62 KB
3.5%	0.3	图片	1500*1125	139.22 KB-100.92 KB	589ms	Base64	图片	300*225	25.80 KB
8.97%	0.8	图片	1000*750	277.03KB-196.37 KB	866ms	Base64	图片	200*150	12.84KB
30%	1	图片	1000*750	1.08MB-759.61 KB	2.3s	Base64	图片	200*150	12.92KB
3.6%	0.5	图片	1000*750	135.75 KB-96.66 KB	612ms	Base64	图片	200*150	12.81 KB

备注：图片清晰度影响因素较多，表中数据仅供参考
建议：适当减小图片尺寸可以大幅降低图片大小，canvas清晰度配置0.5、0.3时性价比比较高，但最终还是需要根据场景和业务需要确定合适的压缩参数
4、不同项目可以针对性配置又拍云缩略图，访问方式参照url!percent20，端内目前还不支持webp格式，端外可配置webp好处