手机调用拍照功能（简单）

手机打开页面才能调用 ，

标签代码

<template>

  <div id="abb">

    <div class="file-box" id="box">

      拍照上传

      <input

        type="file"

        accept="image/*"

        capture="camera"

        id="file_input"

        class="file-btn"

      />

    </div>

    <img id="showimg" />

  </div>

</template>

js代码

export default {

  data() {

    return {};

  },

  mounted() {

    var showimg = document.getElementById("showimg");

    var imginput = document.getElementById("file_input");

    document.getElementById("box").onclick = function () {

      imginput.onchange = function () {

        var files = this.files;

        console.log(files); //本地的临时路径 //　formdata再传给后台

        var formdata = new FormData();

        formdata.append('fileStream', files);

        var url = URL.createObjectURL(files[0]);

        showimg.src = url;

      };

    };

  },

};

css代码

#file_input {

  opacity: 0; 

    position: absolute;

    width: 100%;

    height: 100;

    background: pink;

    z-index: 1111;

    left: 0;

    line-height: 40px;

}

#box {

  margin: auto;

  background: aqua;

  width: 100px;

  height: 40px;

  line-height: 40px;

}