一、组件代码
<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>
三、效果
点击按钮