[Bug Report] 上传组件在华为p30上没有摄像头选项，直接进入相册了

[Thlq]

设备 / 浏览器

华为p30/微信内置浏览器

Vant 版本

2.6.0-beta.0

Vue 版本

2.6.11

重现链接

https://youzan.github.io/vant-issue-generater

描述问题

上传组件在华为p30上拉不起摄像头，直接进入相册了

[Thlq]

能帮忙看下这个问题吗

[websrookie]

能帮忙看下这个问题吗

我的也是这个问题，请问解决了么

[chenjiahan]

木有 P30 手机唉，可以试下原生的 input file 会不会有同样的问题

[websrookie]

木有 P30 手机唉，可以试下原生的 input file 会不会有同样的问题

原生的是可以的，而且现在这个uploader感觉所有的手机都不能调用摄像头

[Thlq]

木有 P30 手机唉，可以试下原生的 input file 会不会有同样的问题

原生的是可以的，而且现在这个uploader感觉所有的手机都不能调用摄像头 我这边尝试的是部分手机可以，部分不可以，不可以的两个一个是华为p30另一个是荣耀的

[websrookie]

可以试试 accept="image/*" 不需要capture

[Thlq]

可以试试 accept="image/*" 不需要capture

就是默认的这个

[ywc644653066]

解决了嘛，我也遇到啦

[yixiangpeng2020]

如果使用CDN直接引入的话是可以调起相机和图库的选项的。用Vue.use()就gg了

[panning1990]

我也遇到这个问题，大家怎么解决的啊？

[sheak]

小米9也遇到类似问题 怎么办？

[crastyle]

这里我用的是原生的控件

created() {
      //禁止分享
      document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
      });
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
      this.isAndroid = isAndroid
    }

<input id="avatarSelect" accept="image/" v-if="!isAndrod" @change="add_img" type="file" /> <input id="avatarSelect" accept="image/" v-if="isAndrod" capture="camera" @change="add_img" type="file" />

[chenjiahan]

尝试复现了下，应该是部分安卓机型的 bug，

• 正常的浏览器：不设置 capture 可以调起摄像头和相册，设置 capture="camera" 只调起摄像头
• 部分安卓机型的浏览器：不设置 capture 只能调起相册，设置 capture="camera 后才能调起相册和摄像头

目前试了下，华为 mate20 正常，华为 p30 pro 存在此问题

可以尝试下面的方法，跟楼上的方案类似（但这样会导致在正常的安卓机型上只能调起摄像头）

<template>
  <van-uploader :capture="capture" />
</template>

<script>
export default {
  data() {
    const isAndroid = /android/.test(navigator.userAgent.toLowerCase());
    return {
      capture: isAndroid ? 'camera' : null,
    };
  }
};
</script>

[Thlq]

尝试复现了下，应该是部分安卓机型的 bug，

• 正常的浏览器：不设置 capture 可以调起摄像头和相册，设置 capture="camera" 只调起摄像头
• 部分安卓机型的浏览器：不设置 capture 只能调起相册，设置 capture="camera 后才能调起相册和摄像头

目前试了下，华为 mate20 正常，华为 p30 pro 存在此问题

可以尝试下面的方法，跟楼上的方案类似（但这样会导致在正常的安卓机型上只能调起摄像头）

<template>
  <van-uploader :capture="capture" />
</template>

<script>
export default {
  data() {
    const isAndroid = /android/.test(navigator.userAgent.toLowerCase());
    return {
      capture: isAndroid ? 'camera' : null,
    };
  }
};
</script>

那这样还是会有问题，导致整行的安卓机型不能选用相册

[chenjiahan]

现在没办法准确地检测有问题的机型，所以我倾向于忽略这个问题

[kingsofish]

我也存在这个问题，建议兼容一下新出的手机，需求在作祟- -

[xiaowang04821]

实测黑鲨手机 oppo 小米也会出现此问题

[cnvoa]

我也遇到了, 华为p30

[YQmomo]

同样遇到，大部分安卓手机都有这个问题，试过的有华为mate30 pro，华为p30，小米，华为 nova4等

[landandan]

感觉这个应该是webview的问题

[fengyun2]

小米，华为出现这个问题

[chenxi5211993]

华为好几款机型出现了这个问题，能显示出相机，但是点击没有反应，摄像机可以调起，照相机不行，这个问题有点严重呀，有人解决了嘛

[chenxi5211993]

在手机自带的浏览器中可以调的起来，在app内置的webkit浏览器中就调不起来

[chenxi5211993]

木有 P30 手机唉，可以试下原生的 input file 会不会有同样的问题

原生的是可以的，而且现在这个uploader感觉所有的手机都不能调用摄像头

老哥，你试的原生的可以么？ 我这边原生的也掉不起来哎

[tanzhiyu]

安卓不能支持多张图片上传可以解决吗

[lg751551023]

上传的组件华为的畅享系列的手机不支持使用

[akbot48]

木有 P30 手机唉，可以试下原生的 input file 会不会有同样的问题

原生的是可以的，而且现在这个uploader感觉所有的手机都不能调用摄像头

是的 多数安卓手机都不行

[liangzi-aha]

这里我用的是原生的控件

created() {
      //禁止分享
      document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
      });
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
      this.isAndroid = isAndroid
    }

<input id =“ avatarSelect” accept =“ image / _” v-if =“！isAndrod” @change =“ addimg” type =“ file” /> <input id =“ avatarSelect” accept =“ image / ” v-if =“ isAndrod” capture =“相机” @change =“ add_img” type =“ file” />

华为p30调用相册已经放弃，我们也是使用微信的js-sdk的api调用的相册

[yuluhuang]

放弃吧，android和ios，android和android都存在差异

[Git-zyn-Hub]

Uploader，上传视频无法预览，什么时候解决。微信的vant-weapp都已经支持了。

[chenjiahan]

暂时没有计划支持在 Web 端支持视频预览。

[1601463525]

capture属性用于调用设备的摄像头或麦克风 HTML5官方文档解释：capture属性用于调用设备的摄像头或麦克风。

当accept=”audio/或video/”时capture只有两种值，一种是user，用于调用面向人脸的摄像头(例如手机前置摄像头)，一种是environment，用于调用环境摄像头(例如手机后置摄像头)。

当accept=”audio”时，只要有capture就调用设备麦克风，忽略user和environment值。

至于网上提到的camera和filesystem，官方没提。

iOS最遵守遵守HTML5规范，其次是X5内核，安卓的webview基本忽略了capture。

理想情况下应该按照如下开发webview：

1.当accept=”image/”时，capture=”user”调用前置照相机，capture=”其他值”，调用后置照相机

当accept=”video/”时，capture=”user”调用前置录像机，capture=”其他值”，调用后置录像机 当accept=”image/,video/”，capture=”user”调用前置摄像头，capture=”其他值”，调用后置摄像头，默认照相，可切换录像 当accept=”audio/*”时，capture=”放空或者任意值”，调用录音机 当input没有capture时，根据accppt类型给出文件夹选项以及摄像头或者录音机选项 input含有multiple时访问文件夹可勾选多文件，调用系统摄像头或者录音机都只是单文件 无multiple时都只能单文件

[crastyle]

您好，以下是自动回复内容：　　您的来信我已收到，我会在尽快最短时间内回复您！　　谢谢您的来信,祝您生活愉快

[Xjiaxiong]

蹲一下，解决了的话希望说一下

[yuluhuang]

您好，邮件已收到，尽快给您回复。