• VUE:身份证组件


    一、组件代码

    <template>
        <div>
            <el-button icon="el-icon-upload" size="mini" type="primary" @click="initPage">{{name}}
            </el-button>
            <el-dialog :title="title" :visible.sync="dialogStatus" width="40%" :close-on-click-modal="false" append-to-body>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <div class="img-col">
                            <el-image v-if="cardFront && cardFront.url" :src="cardFront.url" />
                            <a href="javascript:void(0)" v-else title="点击上传" @click="clickButton(0)">
                                <i class="el-icon-plus"></i>
                            </a>
                            <div class="delete_icon" v-if="cardFront && cardFront.url && editable">
                                <el-link @click="removeFile(cardFront,0)" :underline="false" title="删除">
                                    <i class="el-icon-delete"></i>
                                </el-link>
                            </div>
                        </div>
                        <div class="tip">{{topFront}}</div>
                    </el-col>
                    <el-col :span="10">
                        <div class="img-col">
                            <el-image v-if="cardReverse && cardReverse.url" :src="cardReverse.url" />
                            <a href="javascript:void(0)" v-else title="点击上传" @click="clickButton(1)">
                                <i class="el-icon-plus"></i>
                            </a>
                            <div class="delete_icon" v-if="cardReverse && cardReverse.url && editable">
                                <el-link @click="removeFile(cardReverse,1)" :underline="false" title="删除">
                                    <i class="el-icon-delete"></i>
                                </el-link>
                            </div>
                        </div>
                        <div class="tip">{{topReverse}}</div>
                    </el-col>
                </el-row>
                <el-upload ref="el-upload" v-show="false" action="#" :on-progress="filesUpload" />
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogStatus = false">确认</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
    
    <script>
        import { nfsFileApi } from "api/fileApi"
        export default {
            name: '',
            components: {},
            computed: {},
            created() { },
            props: {
                name: {
                    type: String,
                    default: '点击上传'
                },
                title: {
                    type: String,
                    default: '上传身份证照片'
                },
                topFront: {
                    type: String,
                    default: '(个人图像面)'
                },
                topReverse: {
                    type: String,
                    default: '(国徽 有效期面)'
                },
                tableName: {
                    type: String,
                    default: ""
                },
                frontName: {
                    type: String,
                    default: "frontName"
                },
                reverseName: {
                    type: String,
                    default: "reverseName"
                },
                keyId: {
                    type: String,
                    default: '0'
                },
                cardFrontList: {
                    type: Array,
                    default: function () {
                        return []
                    }
                },
                cardReverseList: {
                    type: Array,
                    default: function () {
                        return []
                    }
                },
                editable: {
                    type: Boolean,
                    default: false
                },
            },
            data() {
                return {
                    dialogStatus: false,
                    cardFront: '',
                    cardReverse: '',
                    currStatus: '',
                    cardFrontShow: false,
                    cardReverseShow: false,
                }
            },
            methods: {
                initPage() {
                    this.dialogStatus = true
                    this.currStatus = ''
                    this.cardFront = ''
                    this.cardReverse = ''
                    this.getFiles()
                },
                clickButton(flag) {
                    if (!this.editable) return
                    this.currStatus = flag
                    this.$refs['el-upload'].$children[0].$refs.input.click()
                },
                //获取文件并显示
                getFiles() {
                    if (!this.keyId) {
                        this.keyId = 0;
                    }
                    if (this.cardFrontList && this.cardFrontList.length > 0) {
                        this.showFile(this.cardFrontList[0], 0)
                    } else {
                        this.getFileList(0)
                    }
                    if (this.cardReverseList && this.cardReverseList.length > 0) {
                        this.showFile(this.cardReverseList[0], 1)
                    } else {
                        this.getFileList(1)
                    }
                },
                //获取文件列表
                getFileList(flag) {
                    const query = {
                        tableName: this.tableName,
                        fieldName: flag == 0 ? this.frontName : this.reverseName,
                        keyId: this.keyId
                    }
                    nfsFileApi.getFileList(query).then(response => {
                        if (response.success && response.data.length !== 0) {
                            this.showFile(response.data[0], flag)
                        }
                    }, err => {
                        console.error(err)
                    })
                },
                //文件回显
                showFile(fileEntity, flag) {
                    //flag 0正面,1反面
                    nfsFileApi.showFile(fileEntity).then(response => {
                        const obj = {
                            url: "data:image/png;base64," + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), "")),
                            fileName: fileEntity.fileName,
                            originName: fileEntity.originName,
                            uploadPath: fileEntity.uploadPath,
                            tableName: this.tableName,
                            fieldName: flag == 0 ? this.frontName : this.reverseName,
                            id: fileEntity.id
                        }
                        if (flag == 0) {
                            this.cardFront = Object.assign({}, obj)
                            const tempArray = [this.cardFront]
                            delete tempArray.url
                            this.$emit("update:cardFrontList", tempArray)
                        } else {
                            this.cardReverse = Object.assign({}, obj)
                            const tempArray = [this.cardReverse]
                            delete tempArray.url
                            this.$emit("update:cardReverseList", tempArray)
                        }
                    })
                },
                filesUpload(event, file, fileList) {
                    if (file.percentage === 0 || file.percentage === 100) {
                        const fileType = 'jpg,jpeg,png'
                        //文件类型列表
                        const fileTypeArr = fileType.split(",")
                        //获取文件的后缀名
                        const extName = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
                        let isSuccessFile = false
                        for (let item of fileTypeArr) {
                            if (item == extName) {
                                isSuccessFile = true
                                break
                            }
                        }
                        if (!isSuccessFile) {
                            this.$message.warning("只允许上传 " + fileType + " 类型的文件");
                            return;
                        }
                        if (file.raw.size / 1024 / 1024 > 20) {
                            this.$message.error("文件大小不能超过20MB!");
                            return;
                        }
                        const data = new FormData();
                        data.append("file", file.raw);
                        nfsFileApi.uploadFile(data).then(response => {
                            if (response.success) {
                                if (response.data) {
                                    const fileEntity = {
                                        originName: response.data.originName,
                                        fileName: response.data.fileName,
                                        uploadPath: response.data.uploadPath,
                                        id: 0,
                                        tableName: this.tableName,
                                        fieldName: this.fieldName
                                    };
                                    this.showFile(fileEntity, this.currStatus);
                                }
                            }
                        })
                    }
                },
                removeFile(val, flag) {
                    if (val.id !== null && val.id !== 0) {
                        this.$confirm('确认删除此文件吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            nfsFileApi.deleteFile(val.id).then(response => {
                                if (response.success) {
                                    this.afterRemove(flag)
                                } else {
                                    this.$message.error('删除文件失败');
                                }
                            })
                        }).catch((err) => {
                            console.error(err)
                        })
                    } else {
                        this.afterRemove(flag)
                    }
                },
                //删除显示
                afterRemove(flag) {
                    if (flag == 0) {
                        this.cardFront = ''
                        this.$emit("update:cardFrontList", [])
                    } else {
                        this.cardReverse = ''
                        this.$emit("update:cardReverseList", [])
                    }
                },
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .tip {
            margin-top: 5px;
            font-size: 13px;
            color: #a7acb3;
            text-align: center;
        }
    
        .img-col {
            height: 140px;
            line-height: 140px;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            background-color: #fbfdff;
            text-align: center;
            position: relative;
    
            .el-icon-plus {
                font-size: 40px;
                color: #8c939d;
            }
    
            .el-image {
                 100%;
                height: 100%;
            }
    
            .delete_icon {
                position: absolute;
                right: 5px;
                top: 5px;
                height: 40px;
                line-height: 0px;
    
                .el-icon-delete {
                    color: red;
                    font-weight:bold;
                }
            }
        }
    </style>

    二、组件使用

    1、引入组件

    import identityCardUpload from '@/components/identityCardUpload'

    2、注册组件

    components: { identityCardUpload  },

    3、使用组件

    <el-col :span="12">
                    <el-form-item label="身份证图片:">
                        <identity-card-upload :editable="true" tableName="t_entity" :keyId="edit.entityId"
                                              :cardFrontList.sync="edit.cardFrontList" :cardReverseList.sync="edit.cardReverseList" name="查看" />
                    </el-form-item>
                </el-col>

    三、效果

    点击按钮

  • 相关阅读:
    关于“每日代码系列”以及后续计划
    每日代码系列(22)
    每日代码系列(21)
    mvcc
    父进程是1号进程产生大量的僵尸进程的解决方案
    nginx学习之路
    Zookeeper Curator 分布式锁
    jvm垃圾收集器汇总
    MySql分库分表以及相关问题
    Https交互原理
  • 原文地址:https://www.cnblogs.com/zwh0910/p/16049211.html
Copyright © 2020-2023  润新知