vue H5页面调用手机相机拍照/图片上传_vue这里在手机端调用的时候会出现拍照和选择本地照片的选项,目前只需要出现选择拍

//html
     //相机  //capture：user（前置摄像头）、environment（后置摄像头）

<div class="file-box">

            <span class="btn">拍照</span>

            <input class="file-btn" type="file" id="photo" capture="environment" accept="image/*" name="photo" @change="selectPhoto()" />

          </div>

 
//js
 
selectPhoto() {
            let _this = this;
            let file = document.getElementById("photo").files[0];
            let content = null;
            let readfile = new FileReader();
            if (file != undefined) {
                content = readfile.readAsDataURL(file, "UTF-8");
                readfile.onload = function(event) {
                    content = event.target.result;
                    let blod = _this.base64ToFile(
                        content,
                        new Date().getTime() + ".png"
                    );
//blod   手机相机拍的图片  fileChange()方法上传图片
                    _this.fileChange(blod);
                };
                readfile.onerror = function(event) {
                    console.log("err");
                };
            } else {
                console.log("未拍照");
            }
        },
 
//转为文件
        base64ToFile(urlData, fileName) {
            let arr = urlData.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bytes = atob(arr[1]);
            let n = bytes.length;
            let ia = new Uint8Array(n);
            while (n--) {
                ia[n] = bytes.charCodeAt(n);
            }
            return new File([ia], fileName, { type: mime });
        },
//上传
async fileChange(file) {
            if (file) {
                let formData = new FormData();
                formData.append("file", file);
                formData.append("filePath", "/basicGovernance/informationAdd");
                let { details, code } = await fileUpload(formData);
                if (code == 200) {
                    this.idCardIdentify(details.data.filePath);
                }
            } else {
                let formData = new FormData();
                formData.append("file", this.$refs.fileUpload.files[0]);
                formData.append("filePath", "/basicGovernance/informationAdd");
                let { details, code } = await fileUpload(formData);
                if (code == 200) {
                    this.idCardIdentify(details.data.filePath);
                }
            }
        },

样式：

.file-box {

  height: 32px;

  width: 74px;

  display: inline-block;

  position: relative;

  overflow: hidden;

}

.file-btn {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  opacity: 0;

}

.btn {

  display: inline-block;

  width: 100%;

  height: 100%;

  text-align: center;

  line-height: 32px;

  border-radius: 3px;

  font-weight: 400;

  font-size: 14px;

  background: #3274f9;

  color: #fff;

}