vue中使用lrz上传图片——身份认证

ps: 最近有点忙。今天抽时间记录下， 项目中应用到： 身份认证， 使用 lrz 插件上传图片。

写的不好，欢迎各位指点，谢谢。

效果图

引入lrz文件

 /*
  引入外部上传压缩图片js
  第一：在webpack.base.conf.js的module.exports中resolve中进行引用：
  第二：在 alias中加入  'lrz':resolve('src/assets/uploadjs/lrz.bundle.js'), 加别名
  第三：在需要组件中引入lrz
 */

resolve: {
    extensions: ['.vue', '.js', '.json', '.scss' ,'*'],
    alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
       'lrz':resolve('src/assets/uploadjs/lrz.all.bundle.js')
    }
},
# 注意： 引入 all的文件兼容性好

初始化

<script>
	import lrz from 'lrz'  //引入别名
	export default {
        name: 'identityCard',
        data() {
            return {
                name: '',
                identity: '',
                config: {  //压缩图片控制(自定义)
                    width: 720,
                    height: 320,
                    quality: 0.6
                },
                /**
                * file: 文件流
                * urlinfo： 上传后图片
                * urlshow： 是否显示上传后图片
                */
                img1: {"file": "", "urlinfo": "", "urlshow": false}, //身份证头像面
                img2: {"file": "", "urlinfo": "", "urlshow": false},//身份证国徽面
                img3: {"file": "", "urlinfo": "", "urlshow": false}, //手持身份证
                identityStatus: false,//审核状态
                status_txt: '',//状态文字信息
                status_reason: '',//状态原因
                auditBtnstatus: true, //提交按钮是否显示
                files: '', //文件流
                infos: {}, //保存用户信息
                identityInfo: {}, //身份证信息
            }
        },
    }
</script>

判断展示审核未通过原因及重选

created(){
    //获取用户信息（是否有认证的信息）
    this.infos = JSON.parse(getStore('userInfo')) || {};
    let identityObj = this.infos.extends;
    this.identityInfo = identityObj;

    //需求： 展示审核未通过的原因，及可重新选择上传
    if(this.identityInfo != {}) {
        if(this.infos.isauth == 2) {
            this.identityStatus = true;
            this.status_txt ='未通过';
            this.status_reason = this.identityInfo.remark;
            this.anew_one = true;
            this.anew_two = true;
            //展示已上传过的信息
            this.name = this.identityInfo.name;
            this.identity = this.identityInfo.card_id;
            this.img1.urlshow = true;
            this.img2.urlshow = true;
            this.img1.urlinfo = this.identityInfo.card_front;
            this.img2.urlinfo = this.identityInfo.card_behind;

            //未通过，直接点击提交按钮，文件流赋值上次值，否则为空后台不通过
            this.img1.file = this.identityInfo.card_front;
            this.img2.file = this.identityInfo.card_behind;
        }
    }
},

解决上传图片安卓与IOS兼容问题

mounted() {
    //解决上传图片时capture="camera"在安卓与IOS的兼容性问题（在IOS只能拍照，不能选相册）
    var ua = navigator.userAgent.toLowerCase();//获取浏览器的userAgent,并转化为小写——注：userAgent是用户可以修改的
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);//判断是否是苹果手机，是则是true
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
},

选择身份证图片

chooseFile (index,e) {
    // console.log(index); console.log(e);
    var self = this
    var file = e.target.files[0];

    lrz(file, self.config)
        .then(function (rst) {
        // console.log(file.name)
        if(Number(index) == 1){
            self.img1.urlinfo = rst.base64;
            self.img1.urlshow = true;
            self.img1.file = file;
            self.anew_one = true;
        }else if(Number(index) == 2){
            self.img2.urlinfo = rst.base64;
            self.img2.urlshow = true;
            self.img2.file = file;
            self.anew_two = true;
        }
    })
        .catch(function (err) {
        this.$toast('上传失败，请重新上传');
    })
        .always(function () {
        // 清空文件上传控件的值
        e.target.value = null
    })
},

上传图片

doUpload: function () {
    //非空判断省略
    
    let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]\s+=]/im,
        regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;

    if(regEn.test(this.name) || regCn.test(this.name)) {
        this.$toast("名称不能包含特殊字符.");
        return;
    }
    
    if (!this.isIdentity(this.identity)) {
        this.$toast('身份证输入不合法');
        return;
    }

    let param = new FormData() // 创建form对象
    param.append('name', this.name) // 添加form表单中其他数据
    param.append('card_id', this.identity)
    param.append('card_front', this.img1.file) // 通过append向form对象添加数据
    param.append('card_behind', this.img2.file) // 通过append向form对象添加数据

    //提交身份认证
    this.loading('提交中...');
    this.axios.identityAuthentication(param).then((response) => {
        this.$toast.clear()
        let datas = response.data;
        if(parseInt(datas.code) == 200){
            this.showAudit = true;
        }else {
            this.$toast(datas.msg);
        }
    })
},
    
isIdentity(card) {
   // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
   var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
   if(!reg.test(card)){ 
      return false; 
   }else {
      return true;
   }
},

template

<template>
    <section class="identityCardWrap">
       <section>
          <section class="fillInfoBox" v-show="fillInfo">
             <div class="items" v-show="shenhestatus">
                    <label>审核状态：</label>
                    <div class="checkStatus">
                        <span style=" color: #ed235c;" >{{status_txt}}</span> <span>{{status_reason}}</span>
                    </div>
                </div>
                <div class="items">
                    <label for="">证件姓名：</label>
                    <van-cell-group>
                        <van-field v-model.trim="name" maxlength="10" />
                    </van-cell-group>
                </div>
                <div class="items">
                    <label for="">身份证号：</label>
                    <van-cell-group>
                        <van-field
                            v-model.trim="identity"
                            clearable
                            maxlength="18"
                            minlength="15"
                            οnkeyup="this.value=this.value.replace(/\s+/g,'')"
                        />
                    </van-cell-group>
                </div>
            </section>

            <section class="tipBox">
                <span>注：</span>1·头部与身份证无重叠。2·本人头像清晰。3·身份证信息清晰。4·图片不能超过3M
            </section>

            <section class="identityCardBox">
                <ul>
                    <li>
                        <div class="items">
                            <div class="lefts">
                                <img src="../../assets/images/card/bg_1.png" alt="">
                                <div class="box" >
                                    <img src="../../assets/images/card/bg_4.png" alt="">
                                    <!--  accept="image/*"  capture="camera" accept="image/jpg,image/jpeg,image/png"-->
                                    <input class="form-control input1" type="file" ref="removeFile" accept="image/*"  @change="chooseFile('1',$event)">
                                    <div>
                                        点击上传
                                    </div>
                                </div>
                                <!-- 上传图片样式 -->
                                <div class="uploadImg" v-show="img1.urlshow">
                                    <img :src="img1.urlinfo"  alt="">
                                </div>
                            </div>
                            <div class="rights">
                                <div class="txt">
                                    身份证头像面
                                </div>
                                <div class="updateBtn" v-show="anew_one">
                                    <div>
                                        重新上传
                                    <input class="form-control input1" type="file" ref="removeFile" accept="image/*" @change="chooseFile('1',$event)">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="items">
                            <div class="lefts">
                                <img src="../../assets/images/card/bg_2.png" alt="">

                                <div class="box">
                                    <img src="../../assets/images/card/bg_4.png" alt="">
                                    <input class="form-control input1" type="file" ref="removeFile" accept="image/*" @change="chooseFile('2',$event)">
                                    <div>
                                        点击上传
                                    </div>
                                </div>
                                <!-- 上传图片样式 -->
                                <div class="uploadImg" v-show="img2.urlshow">
                                    <img :src="img2.urlinfo"  alt="">
                                </div>
                            </div>
                            <div class="rights">
                                <div class="txt">
                                    身份证国徽面
                                </div>
                                <div class="updateBtn" v-show="anew_two">
                                    <div>
                                        重新上传
                                    <input class="form-control input1" type="file" ref="removeFile" accept="image/*" @change="chooseFile('2',$event)">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="commBtn" @click="doUpload" v-show="auditBtnstatus">
                    <div>
                        {{auditBtn}}
                    </div>
                </div>
            </section>

            <!-- 弹窗 -->
            <section class="alertPrompt" v-show="showAudit">
                <div class="bg"></div>
                <div class="boxs">
                    <div class="title">
                        等待审核
                    </div>
                    <div class="text">
                        <p>资料已成功上传，</p>
                        <p>我们会尽快完成审核！</p>
                    </div>
                    <div class="knowBtn" @click="knowBtn">
                        <p>知道并进入首页</p>
                    </div>
                </div>
            </section>
       </section>
    </section>
</template>

scss样式

<style lang="scss" scoped>
    @import "../../assets/style/mixin";
    .identityCardWrap {
        background: #fff;
        @include sc(0.3rem, #212121);
        .fillInfoBox {
            padding: 0.2rem 0.3rem 0 0.32rem;
            .items {
                @include fc;
                padding-top: 0.31rem;
            }
        }
        .checkingBox {
            padding-left: 0.32rem;
            padding-top: 0.07rem;
            ul {
                li {
                    padding: 0.23rem 0;
                    .items {
                        @include fc;
                        line-height: 24px;
                        label {
                            padding-right: 0.1rem;
                        }
                        .checkStatus {
                            @include fc;
                            span {
                                color: #ed235c;
                            }
                            .no {
                                color: #666;
                                padding-left: 0.2rem;
                            }
                        }
                    }
                }
            }
        }
        .tipBox {
            @include sc(0.24rem, #666);
            line-height: 1.8;
            padding: 0.45rem 0.3rem 0 0.37rem;
            span {
                color: #ed235c;
            }
        }
        .identityCardBox {
            ul {
                padding-left: 0.32rem;
                padding-right: 0.28rem;
                li {
                    padding-top: 0.43rem;
                    .items {
                        @include wh(100%, 3rem);
                        @include fc;
                        .lefts {
                            @include wh(4.7rem, 100%);
                            position: relative;
                            img {
                                @include wh(100%, 100%);
                            }
                            .box {
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                img {
                                    @include wh(0.64rem, 0.64rem);
                                    margin: 0 auto;
                                    display: block;
                                }
                            }
                            .uploadImg {
                                position: absolute;
                                top: 0;
                                left: 0;
                                @include wh(100%, 101%);
                                img {
                                    @include borderRadius(0.04rem);
                                    @include wh(100%, 100%);
                                }
                            }
                        }
                        .rights {
                            flex: 1;
                            @include fc;
                            flex-direction: column;
                            margin-top: 0.6rem;
                            .txt {
                                // padding-left: 0.2rem;
                                padding-bottom: 0.25rem;
                            }
                            .updateBtn {
                                margin: 0 auto;
                                @include wh(1.73rem, 0.7rem);
                                @include sc(0.3rem, #333);
                                @include borderRadius(0.35rem);
                                background-color: #f5f5f5;
                                @include fcc;
                                position: relative;
                                >div {
                                    width: 100%;
                                    text-align: center;
                                }
                            }
                        }
                        .input1 {
                            position: absolute;
                            left: 0px;
                            top: 0px;
                            height: 100%;
                            width: 100%;
                            opacity: 0;
                        }
                    }
                }
            }
            .commBtn {
                @include wh(55%, 0.86rem);
                margin: 0 auto;
                @include sc(0.36rem, #fff);
                background-color: $main;
                @include borderRadius(0.43rem);
                @include fcc;
                margin-top: 0.83rem;
                margin-bottom: 0.53rem;
                >div {
                    width: 100%;
                    text-align: center;
                }
            }
        }
        //部分公共样式未上传
        .alertPrompt {
            .boxs {
                @include wh(82%, 5.5rem);
                .title {
                    @include sc(0.36rem, #212121);
                    font-weight: 500;
                    padding-top: 0.99rem;
                }
                .text {
                    p {
                        @include sc(0.3rem, #666);
                    }
                }
                .knowBtn {
                    margin: 0 auto;
                    @include wh(60%, 0.8rem);
                    @include borderRadius(0.4rem);
                    border: 1px solid #94a8fc;
                    @include fcc;
                    @include sc(0.34rem, #94a8fc);
                    margin-top: 0.4rem;
                    p {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>