oa-system/src/components/OP/OCRIdentify.vue

<template>
    <div class="ocr-all">
        <div style="color: #606266;font-size: 15px;font-weight: 600;">PS:选择图片后，点击要需要识别类型！</div>
        <div class="ocr-box">
            <el-upload
            action="#"
            list-type="picture-card"
            :on-change="handleChangePicture"
            :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                    >
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                    >
                    <i class="el-icon-download"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                    >
                    <i class="el-icon-delete"></i>
                    </span> -->
                </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
        <div style="color: #606266;font-size: 15px;font-weight: 600;text-align: center;">上传图片只能是 JPG,PNG,BMP 格式!大小不能超过 7MB!</div>
        <el-row>
            <el-button type="primary" @click="license()">营业执照</el-button>
            <el-button type="primary" @click="IDcardR()">身份证-人像面</el-button>
            <el-button type="primary" @click="creditCode()">统一信用代码</el-button>
            <el-button type="primary" @click="IDcardG()">身份证-国徽面</el-button>
            <el-button type="primary" @click="driving()">行驶证</el-button>
            <el-button type="primary" @click="household()">户口本</el-button>
            <el-button type="primary" @click="deed()">房产证</el-button>
            <el-button type="primary" @click="Marriage()">结婚证</el-button>
            <el-button type="primary" @click="mainlandPassport()">大陆护照</el-button>
            <el-button type="primary" @click="universal()">通用印刷体</el-button>
            <el-button type="primary">营业执照(英文)</el-button>
            <el-button type="primary">统一信用代码(英文)</el-button>
            <el-button type="primary">身份证-人像面(英文)</el-button>
            <el-button type="primary">身份证-国徽面(英文)</el-button>
            <el-button type="primary">行驶证(英文)</el-button>
            <el-button type="primary">户口本(英文)</el-button>
            <!-- <el-button type="primary">户口本-成员页</el-button> -->
            <!-- <el-button type="primary">户口本-成员页(英文)</el-button> -->
            <el-button type="primary">房产证(英文)</el-button>
            <el-button type="primary">结婚证(英文)</el-button>
            <el-button type="primary">大陆护照(英文)</el-button>
            <el-button type="primary">通用印刷体(英文)</el-button>
        </el-row>
    </div>
</template>

<script>
import { el } from '@fullcalendar/core/internal-common';
export default {
    data() {
    return {
        token:'',
        userid:'',
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        panduan:"",
        picBase64:''
  	}
	},
    methods: {
        // handleRemove(file,) {
        //     console.log(file);
        //     file.status='cancel'
        // },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // handleDownload(file) {
        //     console.log(file);
        // },
        handleChangePicture(file, fileList) {
            this.beforeAvatarUpload(file)
            if (fileList.length > 1) {
                    fileList.splice(0, 1);
                }
            if(this.panduan){
                this.getBase64(file.raw).then(res => {
                    this.picBase64=res
                    console.log(res)
                });
            }
        },
        beforeAvatarUpload(file) {
            this.panduan=true;
            const isJPG = file.raw.type === 'image/jpeg';
            const isPNG = file.raw.type === 'image/png';
            const isWEBP = file.raw.type === 'image/webp';
            const isLt2M = file.size / 1024 / 1024 < 7;
            if (!isJPG&&!isPNG&&!isWEBP) {
                this.$message.error('上传图片只能是 JPG,PNG,BMP 格式!');
                this.panduan=false;
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 7MB!');
                this.panduan=false;
            }
            return isJPG && isLt2M;
        },
        getBase64(file) {
            return new Promise(function (resolve, reject) {
                const reader = new FileReader()
                let imgResult = ''
                reader.readAsDataURL(file)
                reader.onload = function () {
                imgResult = reader.result
                }
                3





                
                reader.onerror = function (error) {
                reject(error)
                }
                reader.onloadend = function () {
                resolve(imgResult)
                }
            })
        },
        //身份证人像面
        IDcardR(){
            var url="/api/TencentOCR/GetIDCard"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        userId:that.userid,
                        language:'en',
                        picBase64:that.picBase64,
                        cardSide:0
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //身份证国徽面
        IDcardG(){
            var url="/api/TencentOCR/GetIDCard"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        userId:that.userid,
                        picBase64:that.picBase64,
                        cardSide:1
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //营业执照
        license(){
            var url="/api/TencentOCR/GetBizLicenseOCR"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //统一信用代码
        creditCode(){
            var url="/api/TencentOCR/GetOrgCodeCertOCR"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //行驶证
        driving(){
            var url="/api/TencentOCR/GetVehicleLicense"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                        cardSide:0
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //户口本
        household(){
            var url="/api/TencentOCR/GetResidenceBookletOCR"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //房产证
        deed(){
            var url="/api/TencentOCR/GetPropOwnerCert"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //结婚证
        Marriage(){
            var url="/api/TencentOCR/GetMarriageLicense"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //结婚证
        mainlandPassport(){
            var url="/api/TencentOCR/GetPassport"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
        //通用印刷体
        universal(){
            var url="/api/TencentOCR/GetGeneralBasic"
            var that=this
            if(that.panduan){
                that.fullscreenLoading = true;
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        picBase64:that.picBase64,
                    }
                }).then(function(res){
                    if(res.data.code==200){       
                        console.log(res)
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });           
                        // window.open(res.data.data.downUrl)
                    }else{
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });       
                    }
                })
            }else{
                this.$message.error('请检查图片是否为此类型!');
            }
        },
    },
    mounted(){
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
    }
}
</script>
<style>
    .ocr-all {
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    .ocr-box .el-upload-list--picture-card .el-upload-list__item{
        display: inline-flex;
    }
    .ocr-box{
        display: flex;
        justify-content: center;
        margin-top: 180px;
    }
    .ocr-all .el-button--primary{
        width: 160px;
        margin: 10px 0px;
    }
    .ocr-all .el-button+.el-button{
        margin-left: 0px;
    }
    .ocr-all .el-row{
        width: 44%;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 180px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .ocr-all .el-row::after, .ocr-all .el-row::before{
        content: none;
    }
</style>