[移动开发]小程序中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等机型测试均无问题。
     }

超强干货来袭

云风专访：近40年码龄，通宵达旦的技术人生