<fileUpload ref="fileUploadRef"
v-model="fileList"
:fileType="['jpg', 'png', 'pdf', 'xlsx', 'docx', 'zip']"
:maxSize="2" />
<template>
<div class="upload">
<el-upload v-model:file-list="fileList" action="/zhoushan/inner/common/upload/file" :list-type="listType"
:limit="limit" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload"
:on-success="handleSuccess" :on-error="handleError">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<el-image-viewer v-if="imgView" :url-list="urlList" :initial-index="initialIndex" hide-on-click-modal
@close="imgViewClose"></el-image-viewer>
</div>
</template>
<script setup>
import { ref, computed, watch, } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { getImgUrl } from '@/utils/index'
const props = defineProps({
modelValue: {
type: Array,
default: () => {
return []
}
},
listType: {
type: String,
default: 'picture-card'
},
limit: {
type: Number
},
disabled: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
fileType: {
type: Array,
default() {
return []
}
},
maxSize: {
type: Number,
default: 2
}
})
const emit = defineEmits(['update:modelValue'])
const fileList = ref([])
const fileSuccess = ref([])
const fileType = ref('')
const beforeAvatarUpload = (file) => {
fileType.value = file.name.match(/\.[^.]+$/g)[0].replace(/\./g, '')
if (props.fileType.length && !props.fileType.includes(file.name.match(/\.[^.]+$/g)[0].replace(/\./g, ''))) {
ElMessage({
message: `允许上传的格式: ${props.fileType.join(' | ')}`,
type: 'warning',
})
return false
}
if (file.size / 1024 / 1024 >= props.maxSize) {
ElMessage({
message: `允许上传的文件大小 0 ~ ${props.maxSize} M`,
type: 'warning'
})
return false
}
}
const handleSuccess = (response, uploadFile, uploadFiles) => {
if (response.code !== 200) {
ElMessage.error(response.msg)
return false
}else{
fileSuccess.value.push(response.data)
/
fileListFun()
emit('update:modelValue', fileList)
}
}
watch(() => props.modelValue, (val) => {
fileSuccess.value = val
fileListFun()
}, { deep: true })
const fileListFun = () => {
fileList.value = []
if(Array.isArray(fileSuccess.value) && fileSuccess.value.length){
fileList.value = fileSuccess?.value.map((item) => {
if (/.pdf$/.test(item.url)) {
item = {
url: getImgUrl('icon/pdf.svg'),
showUrl: item.showUrl,
realUrl: item.url
}
} else if (/.xlsx$/.test(item.url)) {
item = {
url: getImgUrl('icon/xlsx.svg'),
showUrl: item.showUrl,
realUrl: item.url
}
} else if (/.doc$/.test(item.url) || /.docx$/.test(item.url)) {
item = {
url: getImgUrl('icon/doc.svg'),
showUrl: item.showUrl,
realUrl: item.url
}
} else if (/.zip$/.test(item.url) || /.rar$/.test(item.url)) {
item = {
url: getImgUrl('icon/zip.svg'),
showUrl: item.showUrl,
realUrl: item.url
}
} else if (/(.jpg|.png|.jpeg)$/.test(item.url)) {
item = {
url: item.showUrl,
realUrl: item.url
}
} else {
item = {
url: item.url,
realUrl: item.url
}
}
return item
})
}
}
const handleError = (error, uploadFile, uploadFiles) => {
}
const handleRemove = (uploadFile, uploadFiles) => {
const findIndex =fileSuccess.value.findIndex((item) => {
return item.url === uploadFile.showUrl
})
fileSuccess.value.splice(findIndex, 1)
fileListFun()
emit('update:modelValue', fileList)
}
import download from '@/utils/download.js'
const imgView = ref(false)
const urlList = ref([])
const initialIndex = ref(0)
const handlePreview = (file) => {
if (!/(.jpg|.png|.jpeg|.webp|.svg)$/.test(file.url)) {
if (/.pdf$/) {
window.open(file.url, '_blank');
} else {
download(file.url, file.name || `${Math.floor(Math.random() * 1000)}`)
}
} else {
imgView.value = true
initialIndex.value = fileList.value.findIndex(item => {
return item.url === file.url
})
urlList.value = fileList.value.map(item => {
return item.url
})
}
}
function imgViewClose() {
imgView.value = false
urlList.value = []
}
</script>
<style lang="scss" scoped>
:deep(.el-upload--picture-card) {
width: 100px;
height: 100px;
}
:deep(.el-upload) {
width: 100px;
height: 100px;
line-height: 100px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
width: 100px;
height: 100px;
line-height: 100px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item-thumbnail) {
width: 100px;
height: 100px;
line-height: 100px;
}
:deep(.avatar) {
width: 100px;
height: 100px;
}
</style>