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>