AppCan内使用Vant Uploader组件 安卓无法打开摄像头解决办法

AppCan内使用Vant Uploader组件，原生h5无法打开安卓摄像头解决办法

改用AppCan插件解决，支持拍照上传，相册上传

<template>
  <div class="van-ov-upload-root">
    <van-uploader ref="van_uploader"
                  capture="camera"
                  v-model="value"
                  :max-count="maxCount"
                  preview-size="65px"
                  @delete="deleteFile"
                  @oversize="uploadFileOverSize"
                  :loop="false" max-size="5242880">
      <img class="el-ov-uploader-file" slot="default" @click.stop="showActionSheet($event)"
           src="../../assets/common/icon_upload.png" width="72px"
           alt="">
    </van-uploader>
  </div>
</template>

<script>
import {Toast} from "vant";
import {getFileInfoList} from "@/api/common";

export default {
  name: "van-ov-uploader",
  props: {
    value: {
      default: Array
    },
    pictureid: {
      default: String
    },
    maxCount: {
      default: 6
    }
  },
  data() {
    return {
      deleteFileIds: [],
      pictureList: []
    }
  },
  watch: {
    value: function (val) {
      this.deleteFileInput()
    }
  },
  mounted() {
    this.deleteFileInput()
  }, beforeUpdate() {
    this.deleteFileInput()
  },
  updated() {
    this.deleteFileInput()
  },
  methods: {
    deleteFileInput() {
      document.getElementsByClassName('van-uploader__input')[0].remove()
    },
    showActionSheet(event) {
      event.preventDefault();
      let that = this
      uexWindow.actionSheet({
        title: "",
        cancel: "取消",
        buttons: "拍照上传,本地上传"
      }, function (index) {
        if (index == 0) {
          try {
            uexCamera.open(1, '', function (data) {
              let uploader = uexUploaderMgr.create({
                url: process.env.VUE_APP_BASE_API + "/api/mongodb/fileInfo/uploadFileInfo?parentId=" + that.pictureid,
                type: 1
              });
              if (!uploader) {
                alert("创建失败!");
              }
              uexUploaderMgr.uploadFile(uploader, data, "file", 1, 640, function (packageSize, percent, responseString, status) {
                if (status == 1) {
                  let data = {
                    parentId: that.pictureid,
                  }
                  this.pictureList = []
                  getFileInfoList(data).then((resp) => {
                    if (resp.code == 1 && resp.data.rows.length != 0) {
                      let item = resp.data.rows[resp.data.rows.length - 1]
                      that.value.push({
                        url: process.env.VUE_APP_BASE_API + '/api/mongodb/downloadFile?fileId=' + item.id,
                        isImage: true
                      })
                      that.deleteFileInput()
                    }
                  }).catch()
                } else if (status == 2) {
                  alert("上传失败");
                }
                that.deleteFileInput()
              });
            })
          } catch (e) {
            alert(JSON.stringify(e))
          }

        } else if (index == 1) {
          //打开多图片选择器
          var data = {
            min: 1,
            max: 1,
            quality: 1,
            detailedInfo: true,
            // style: 1,
          };
          uexImage.openPicker(data, function (error, info) {
            if (error == -1) {
            } else if (error == 0) {
              if (info.detailedImageInfo) {
                info.detailedImageInfo.map(async (item) => {
                  var uploader = uexUploaderMgr.create({
                    url: process.env.VUE_APP_BASE_API + "/api/mongodb/fileInfo/uploadFileInfo?parentId=" + that.pictureid,
                    type: 1
                  });
                  if (!uploader) {
                    alert("创建失败!");
                  }
                  uexUploaderMgr.uploadFile(uploader, item.localPath, "file", 0, 640, function (packageSize, percent, responseString, status) {
                    if (status == 1) {
                      let data = {
                        parentId: that.pictureid,
                      }
                      this.pictureList = []
                      getFileInfoList(data).then((resp) => {
                        if (resp.code == 1 && resp.data.rows.length != 0) {
                          let item = resp.data.rows[resp.data.rows.length - 1]
                          that.value.push({
                            url: process.env.VUE_APP_BASE_API + '/api/mongodb/downloadFile?fileId=' + item.id,
                            isImage: true
                          })
                        }
                        that.deleteFileInput()
                      })
                    }
                  })
                })
              }
            }
          });
          that.deleteFileInput()
        }
      });
    },

    deleteFile(obj) {
      let url = obj.url
      let fileId = url.substr(url.lastIndexOf("fileId=") + 7)
      this.deleteFileIds.push(fileId)
    }
    ,
    uploadFileOverSize(obj) {
      Toast("图片大小超出限制，图片大小应在 5MB 之内");
    }
    ,
  }
}
</script>

<style lang="scss">
.van-ov-upload-root {
  .van-uploader__input-wrapper {
    width: 72px;
    height: 72px;

  }

  .el-ov-uploader-file {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
    overflow: hidden;
    cursor: pointer;
  }
}

</style>

//pictureid 为上传图片关联的主键，这个可以删除，根据自己的业务逻辑去修改
//获取删除的图片ID   this.$refs.van_ov_uploader.deleteFileIds
//这个代码，删除了Vant组件的原生input，使用vant uploader 的样式以及上传后的图片预览等样式
//上传逻辑采用调用appcan插件
//document.getElementsByClassName('van-uploader__input')[0].remove()
//调用方法
 <van-ov-uploader
            ref="van_ov_uploader"
            v-model="fileList"
            :pictureid="pictureid"
></van-ov-uploader>