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

7 篇文章 1 订阅

在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/*"  放在最后的位置。

类似于 : 

<van-uploader  属性1 属性2 属性N  capture="camera"; accept="image "/>

2022 06 20 添加 官方文档内容

Uploader 在部分安卓机型上无法上传图片?

Uploader 采用了 HTML 原生的 <input type="file /> 标签进行上传,能否上传取决于当前系统和浏览器的兼容性。当遇到无法上传的问题时,一般有以下几种情况:

  1. 遇到了安卓 App WebView 的兼容性问题,需要在安卓原生代码中进行兼容,可以参考此文章
  2. 图片格式不正确,在当前系统/浏览器中无法识别,比如 webp 或 heic 格式。
  3. 其他浏览器兼容性问题。

 

  • 5
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 53
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 53
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值