<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"
|
: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 )
|
return list
|
},
|
hideUpload() {
|
return this.list.length >= this.limitFileCount
|
}
|
},
|
methods: {
|
uploadRequest(UploadRequestOptions) {
|
const data = {
|
file: UploadRequestOptions.file,
|
directory: ''
|
}
|
this.$axios.post('/infra/file/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'
|
this.list[index].url = res.data.data
|
}
|
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: 160px !important;
|
height: 90px !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>
|
