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

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值