[JavaScript知识库]vue H5页面调用手机相机拍照/图库上传

//html
     //相机  //capture：user（前置摄像头）、environment（后置摄像头）
<input type="file" id="photo" capture="user" accept="image/*" name="photo" @change="selectPhoto()" />

//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);
                }
            }
        },