在折腾:
期间,后来去看了看其他手机端的浏览器,比如此处:
android手机锤子M1L中的UC浏览器,效果也是不错的:
android手机锤子M1L中的自带浏览器,效果也可以:
iPhone6中微信内置浏览器,效果也不错:
iPhone6中Safari和微信内置浏览器效果一样。
iPhone6中QQ浏览器:
文件上传时,第一次点击 手动上传时崩溃了
第二次,可以弹出来选项,但是首次进入 照片图库 时,弹出是否允许访问照片的提示:
-》换句话说:
其他app内置的webview,估计也应该弹出这个提示,但是之前都没有见到。(好像是没有集成 手动上传 所以没看到。)
然后刚才iPhone6中QQ浏览器,再选择照片,加载完毕显示缩略图后,又崩溃了。。。
再去试试Safari,图片加载和显示,倒是还不错,但是有个小小的体验问题:
缩放图片,点击后图片消失后,浏览器也被缩放了,显示内容很大:
要手动再缩小回来才行。。。
总体感觉是
weiui中的uploader,手动上传控件,是可以给用户选择,是相机还是相册的
且手机端浏览器的支持度,总体上算还凑合了。但是各种细节问题,还是有待改进。
但是考虑到:
原生app(android和iOS)内置的webview貌似对于此处的相机和相册,貌似支持的还是不是很好:
至少前面的调用内置相机,有些手机就没反应,无法打开摄像头。
所以暂时还是放弃这条路吧。
然后又去iPhone中Safari中试了试react-weui中的uploader:
果然是点击+直接调用相机,而没有选择照片的选项。
看来官网demo就是这样做的。
去研究用web原生,即HTML5的方式去实现。
不过又发现,之前是由于使用了weui中的自动上传,是无法看到选择相机还是相册的。
所以就去研究,如何可以使得可以弹框,选择相册和文件。
通过对比发现了区别:
weui中自动上传时,input是:
手动上传时,input是:
前者多了个capture=“camera"
所以自动上传时只能直接调用摄像头,
而手动上传时,可以弹出选项选相机还是相册。
所以就先去PC端调试,先看看能否获得输入的图片文件,结果是可以的。
然后接着去看看:
然后接着就是去:
但是有个问题:
(1)英文菜单
iPhone6中,弹出来的选择照片的菜单是英文的:
Take Photo
Photo Library
Cancel
但更严重的是:
(2)iPhone6中app内嵌webview中:
点击Photo Library,直接崩溃,没法进入相册。
(3)三个android手机
锥子M1L
VIVO Y51A
华为TIT-CL00
点击+,都无法弹出选择照片的选项
即使去点击其他地方,弹出是否允许使用相机,选择允许使用相机后,此处还是无法弹出选择框,更别说使用相机或访问相册了。
-》看来对于:
id="uploaderCustomInput"
class="weui-uploader__input"
type="file"
accept="image/*"
multiple=""
onChange={this.handleFileChange}
>
对于主流手机端浏览器支持虽然还可以,但是对于App内嵌的webview中,还是支持很不好,无法正常使用。