storevisit-ui-mobile/src/components/H5Camera.vue

<template>
  <div class="h5Camera">
    <van-icon class="photo photos" name="photograph" size="22px" color="#969696" @click="camera" />
    <input type="file" accept="image/*" :capture="capture" id="h5Camera" />
  </div>
</template>
<script>
export default {
  name: 'H5Camera',
  props: {
    capture: {
      // 摄像头类型 camera：照相机；camcorder：摄像机；microphone：录音
      type: String,
      default: '',
    },
    objectType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      imgUrl: '',
      input: null,
    };
  },
  mounted() {
    this.getH5Cameradome();
  },
  methods: {
    getH5Cameradome() {
      let h5Camera = document.getElementById('h5Camera');
      if (h5Camera) {
        this.input = h5Camera;
        this.input.addEventListener('change', (e) => {
          let file = e.target.files[0];
          let reader = new FileReader();
          reader.onload = (e) => {
            let dataURL = e.target.result;
            this.$emit('getImg', dataURL);
            // console.log(dataURL);
            // 在此处对 dataURL 进行操作，例如显示图片
          };
          reader.readAsDataURL(file);
        });
      } else {
        this.getH5Cameradome();
      }
    },
    camera() {
      if (this.objectType == '' || this.objectType == null) {
        this.$toast('请选择类型！');
        return;
      }
      if (this.input) this.input.click();
    },
  },
};
</script>
<style lang="scss" scoped>
.h5Camera {
  #h5Camera {
    display: none;
  }
}
</style>