小程序中H5页面使用van-uploader上传图片安卓手机调取相机失效问题

解决h5使用van-uploader组件上传图片调取安卓相机失效问题

   <van-cell title="上传图片" />
   <van-uploader
        v-model="fileList"
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-delete="beforeDelete"
        :max-size="10*1024*1024"
        :max-count="3"
        upload-text="上传"
        multiple
        :capture="androidAttrs ? 'camera' : null"
        @oversize="onOversize"
     data(){
         return {
            androidAttrs:null
     }
     created(){
         // 在页面一进来时就去判断当前使用机型
          const model=navigator.userAgent;
          // 判断是否是安卓手机,是则是true
          this.androidAttrs=model.indexOf('Android') > -1 || model.indexOf('Linux') >-1
          // 总结:刚开始遇到这个问题时我也去看了好多论坛里面的各种解决方法,
          但是都不行。后面无意中看到了一个贴子说的是使用input上传文件然后判断后还
          要去删除节点,于是我就跟着一样去试一下发现vant ui不能去到封装后的节点具
          体属性,所以无法去处属性节点。这里要去除恶节点就是capture这个属性,
          ios系统不需要这个属性,而安卓系统需要这个属性才能同时调取相机和相册。
          所以我想了一下既然判断手机系统可行,那我为何不写一个三目运算在这个属性
          上,于是这样试了一下,果然可行!试了大概十几种方法终于可行了。。。真不
          容易呀。目前这种方式遇到一个兼容小问题就是在iphone12上调取相机拍照会闪
          退,调取相机没事。然后使用了oppo 华为 小米 ipone11等机型测试均无问题。
     }
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码De搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值