|
|
@@ -1,14 +1,522 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
-
|
|
|
+ <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-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
|
|
|
+ }
|
|
|
+ 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:'zh',
|
|
|
+ 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: 0px 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .ocr-all .el-row{
|
|
|
+ width: 44%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-bottom: 180px;
|
|
|
+ }
|
|
|
</style>
|
