vue3 el-upload二次封装以及对各种后缀文件的处理

//组件的使用
<fileUpload ref="fileUploadRef" 
v-model="fileList" 
:fileType="['jpg', 'png', 'pdf', 'xlsx', 'docx', 'zip']" 
:maxSize="2" />

// fileUpload.vue
<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: { //允许上传的文件大小 0 ~ 20(单位M)
        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, '')
    // console.log(file)
    // 允许上传的文件格式props.fileType = ['jpg','jpeg','png','pdf','zip', ...]
    if (props.fileType.length && !props.fileType.includes(file.name.match(/\.[^.]+$/g)[0].replace(/\./g, ''))) {

        ElMessage({
            message: `允许上传的格式: ${props.fileType.join(' | ')}`,
            type: 'warning',
        })
        return false
    }
    // 允许上传的文件大小 file.size单位是字节 转换(file.size / 1024) kb,转换(file.size/1024/1024)M
    // console.log(file.size) 小于等于 20M  (props.maxSize 单位是M)
    if (file.size / 1024 / 1024 >= props.maxSize) {
        ElMessage({
            message: `允许上传的文件大小 0 ~ ${props.maxSize} M`,
            type: 'warning'
        })
        return false
    }


}
// 上传成功
// console.log(getImgUrl('icon/pdf.svg'))
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'),//用一个pdf图标代替显示图片
                showUrl: item.showUrl,
                realUrl: item.url
            }
        } else if (/.xlsx$/.test(item.url)) {
            item = {

                url: getImgUrl('icon/xlsx.svg'),//用一个xlsx图标代替显示图片
                showUrl: item.showUrl,
                realUrl: item.url
            }
        } else if (/.doc$/.test(item.url) || /.docx$/.test(item.url)) {
            // console.log(item)
            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'),//用一个zip图标代替显示图片
                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
            }
        }
        // console.log(item)
        return item
    })
    }
    
}
const handleError = (error, uploadFile, uploadFiles) => {
    // console.log('error', error)
    // console.log('uploadFile', uploadFile)
    // console.log('uploadFiles', 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)
    }
// 通过window.open(url)下载文件（xlsx、xls、zip等格式文件），如果前端想要自定义更改下载时的文件名，可以使用以下方法
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>