From e1b028d486713eaf55aaf35fbf334aa568059c0d Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 14 四月 2026 15:46:54 +0800
Subject: [PATCH] 项目复制
---
src/views/components/UploadIdCard.vue | 238 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 238 insertions(+), 0 deletions(-)
diff --git a/src/views/components/UploadIdCard.vue b/src/views/components/UploadIdCard.vue
new file mode 100644
index 0000000..e128b23
--- /dev/null
+++ b/src/views/components/UploadIdCard.vue
@@ -0,0 +1,238 @@
+<template>
+ <el-upload
+ ref="upload"
+ class="my-3 mr-4" action="#"
+ v-model:file-list="list"
+ :accept="acceptType"
+ list-type="picture-card"
+ :http-request="uploadRequest"
+ :multiple="true"
+ :limit="limitFileCount"
+ :on-preview="handlePreview"
+ :on-remove="handleRemove"
+ :before-remove="beforeRemove"
+ :on-exceed="handleExceed"
+ :disabled="disabled"
+ :class="{ hideUpload: hideUpload }"
+ >
+ <template #default>
+ <el-image
+ ref="backgroundImg"
+ :src="$getImageUrl(`/uploadBox/${type}.png`)"
+ >
+ </el-image>
+ </template>
+ <template #file="{ file, index }">
+ <el-image
+ ref="previewImg"
+ :src="file.url?.includes('http') ? file.url : this.$qxueyou.qxyRes + file.url"
+ :initial-index="initialPreviewImgIndex"
+ :preview-src-list="filterPreviewImgList"
+ >
+ </el-image>
+ <span class="el-upload-list__item-actions">
+ <span @click="previewImage(index)">
+ <el-icon><zoom-in /></el-icon>
+ </span>
+ <!-- <span @click="replaceUpload(index)">
+ <el-icon><upload /></el-icon>
+ </span> -->
+ <span @click="deleteFileItem(index)">
+ <el-icon><delete /></el-icon>
+ </span>
+ </span>
+ </template>
+ </el-upload>
+ <el-dialog v-model="imgPreviewDialogFlag">
+ <img w-full :src="previewUrl" alt="Preview Image" />
+ </el-dialog>
+</template>
+
+<script>
+import { getFileUrlName } from '@/utils/tool.js'
+const pdf = 'application/pdf'
+const xls = 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+const doc = 'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+const image = 'image/*'
+const jpg = 'image/jpeg'
+const png = 'image/png'
+import { genFileId } from 'element-plus'
+export default {
+ data() {
+ return {
+ list: [],
+ imgPreviewDialogFlag: false,
+ previewUrl: '',
+ initialPreviewImgIndex: 0
+ }
+ },
+ props: {
+ listType: {
+ type: String,
+ default: 'text'
+ },
+ accept: {
+ type: Array,
+ default: () => {
+ return ['image', 'jpg', 'png']
+ }
+ },
+ limitFileCount: {
+ type: Number,
+ default: 1
+ },
+ modelValue: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ type: {
+ type: String,
+ default: 'face'
+ }
+ },
+ watch: {
+ modelValue: {
+ handler: function() {
+ this.list = this.modelValue
+ this.list.forEach(ele => {
+ if (!ele.name) {
+ ele.name = getFileUrlName(ele.url)
+ }
+ })
+ },
+ immediate: true,
+ deep: true
+ },
+ list: {
+ handler: function(val) {
+ this.$emit('update:modelValue', val)
+ },
+ immediate: true,
+ deep: true
+ }
+ },
+ computed: {
+ acceptType() {
+ let obj = { pdf, xls, doc, image, jpg, png }
+ return this.accept.map(ele => obj[ele]).join(',')
+ },
+ tip() {
+ let obj = {
+ pdf: 'PDF',
+ xls: 'EXCEL',
+ doc: 'WORD',
+ image: '鍥剧墖',
+ jpg: 'JPEG/JPG',
+ png: 'PNG'
+ }
+ let tip = this.accept.map(ele => obj[ele]).join('銆�')
+ return `鏀寔${tip}绫诲瀷鏂囦欢`
+ },
+ againUploadFlag() {
+ return this.limitFileCount == 1 && this.list.length == 1
+ },
+ filterPreviewImgList() {
+ let list = this.list.map(ele => ele.url?.includes('http') ? ele.url : this.$qxueyou.qxyRes + ele.url )
+ return list
+ },
+ hideUpload() {
+ return this.list.length >= this.limitFileCount
+ }
+ },
+ methods: {
+ uploadRequest(UploadRequestOptions) {
+ const data = {
+ file: UploadRequestOptions.file,
+ directory: ''
+ }
+ this.$axios.post('/infra/file/exam/upload', data, {
+ headers: { 'Content-Type': "multipart/form-data" }
+ }).then(res => {
+ let index = this.list.findIndex(ele => ele.uid == data.file.uid)
+ if (res.data.code == 0) {
+ let index = this.list.findIndex(ele => ele.uid == data.file.uid)
+ if (index != -1) {
+ this.list[index].uploadStatus = 'success'
+ let url = res.data.data
+ this.list[index].url = url
+ }
+ this.$message.success('涓婁紶鎴愬姛')
+ } else {
+ if (index != -1) {
+ this.list[index].uploadStatus = 'fail'
+ }
+ this.$message.error(res.data.msg || '涓婁紶澶辫触')
+ }
+ })
+ },
+ deleteFileItem(index) {
+ this.list.splice(index, 1)
+ },
+ previewImage(index) {
+ this.initialPreviewImgIndex = index
+ this.$refs.previewImg?.showPreview()
+ },
+ replaceUpload() {},
+ handleRemove() {},
+ beforeRemove() {},
+ handlePreview() {},
+ handleExceed(file) {
+ if (this.againUploadFlag) {
+ this.$refs.upload?.clearFiles()
+ let newFile = file[0]
+ newFile.uid = genFileId()
+ this.$refs.upload?.handleStart(newFile)
+ this.$refs.upload?.submit()
+ } else {
+ this.$message.error(`鏈�澶氭敮鎸佷笂浼� ${this.limitFileCount} 涓枃浠禶)
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.hideUpload :deep(.el-upload--picture-card) {
+ display: none !important;
+}
+.file-box {
+ display: flex;
+ color: #007AFF;
+ align-content: center;
+ background-color: #ECF5FF;
+ padding: 8px;
+ font-size: 15px;
+ line-height: 16px;
+}
+
+:deep(.el-upload--picture-card), :deep(.el-upload-list__item) {
+ width: 200px !important;
+ height: 126px !important;
+ padding: 1px 0;
+}
+
+.el-upload-list__item-actions {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5); /* 鍗婇�忔槑榛戣壊钂欑増 */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0; /* 榛樿閫忔槑 */
+ transition: opacity .3s; /* 娣诲姞杩囨浮鍔ㄧ敾鏁堟灉 */
+}
+
+/* 榧犳爣鎮仠鏃舵樉绀鸿挋鐗� */
+.el-upload-list__item:hover .el-upload-list__item-actions {
+ opacity: 1;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0