vant 使用上传表单组件（调用手机摄像头拍照）

原创

已于 2022-06-20 22:29:15 修改 · 2.5w 阅读

于 2020-07-01 09:35:33 首次发布

本文详细介绍了Vant框架中的Uploader组件使用方法，包括如何设置文件大小限制、调用摄像头拍摄、处理文件读取及超限情况。针对iOS与安卓设备的兼容性问题提供了解决方案，并分享了官方文档中关于部分安卓机型上传图片失败的常见原因。

在vant组件的成功引入的前提下，写入以下内容

<van-uploader :after-read="afterRead" :max-size="4 * 1024 * 1024" @oversize="onOversize" capture="camera" class="uploader">
	<!-- <span>点击调用摄像头进行拍摄</span> -->
</van-uploader>

属性解释

after-read：是文件读取完成后的回调函数，文件读取完毕后，在这个方法里面进行操作。

max-size ：是判断图片大小的这里的值自己设置 4*1024*1024 表示的是4M。这里表示为图片最大为4M 超过大小的文件会被自动过滤

@oversize="onOversize" ：获取文件信息，可以在这个方法里面提示图片超过大小。

capture="camera" ：图片选取模式，可选值为camera(值为camera直接调起摄像头，否则用户可选拍照或者上传图片)

有朋友提示说，ios可以正常调用摄像头，安卓手机不可以。

可以试一下 accept="image/*" 或者直接不写accept属性。

2021 01 13添加

根据提问添加内容：

如果你不想之间调用摄像头，想在相册中选中，那么在代码中去掉 capture="camera" 。

注： capture="camera" ：图片选取模式，可选值为camera(值为camera直接调起摄像头，否则用户可选拍照或者上传图片)

有时候调用摄像头没有反应，请尝试把 capture="camera" accept="image/*"&nbs

标签

#java #servlet #前端

最低0.47元/天解锁文章