YouKeChuanMei_VUE/src/components/FileUpload/supplierDetailFile.vue

<template>
    <div>
        <div style="width: 100%;">
            <div v-for="itemFile in fileList" class="image-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar viewFile"
                    @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar viewFile" @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar viewFile" @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar viewFile" @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile"
                    @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile"
                    @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile"
                    @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile"
                    @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile"
                    @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
                <img v-else :src="iconOther" class="avatar viewFile"
                    @click.stop="handleCardPreview(itemFile.fileUrl, itemFile.suffix)" />
            </div>
        </div>


        <!-- 图片预览 -->
        <el-dialog v-model="dialogVisible" width="1090px" class="my_dialog" align-center title="附件预览">
            <img v-if="isImageFile(suffix)" :src="dialogImageUrl" class="preview-image" alt="Preview Image" />
            <div v-else class="unsupported-file">
                <pdf-preview :pdf-url="dialogImageUrl" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import iconDoc from '@/assets/images/iconDoc.png'
import iconOther from '@/assets/images/iconOther.png'
import iconPdf from '@/assets/images/iconPdf.png'
import iconVideo from '@/assets/images/iconVideo.png'
import iconXls from '@/assets/images/iconXls.png'
import iconZip from '@/assets/images/iconZip.png'
import iconMove from '@/assets/images/iconMove.png'
import iconTxt from '@/assets/images/iconTxt.png'
import iconPpt from '@/assets/images/iconPpt.png'
import PdfPreview from './PdfPreview.vue'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['setFormFile'])

// 文件列表初始化
const fileList = ref([])

const baseUrl = import.meta.env.VITE_APP_BASE_API
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const suffix = ref('')

const setFileInfo = (files) => {
    fileList.value = files
}

// 判断是否为图片文件
const isImageFile = (suffix) => {
    console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
    return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
}

// 图片预览
const handleCardPreview = (filePath, _suffix) => {
    suffix.value = _suffix
    dialogImageUrl.value = filePath
    dialogVisible.value = true
}


// 暴露方法给父组件
defineExpose({
    setFileInfo
});
</script>

<style lang="scss" scoped>
.hasFileCard {
    display: inline;
    margin-left: 20px;
}

.noFileCard {
    display: inline;
}

.viewFile {
    width: 80px;
    height: 80px;
    border: 1px solid #dedede;
    border-radius: 6px;
}

.upload-container {
    position: relative;
    display: inline-block;
}

.image-wrapper {
    max-width: 80px;
    height: 100px;
    overflow: hidden;
    margin-right: 20px;
    padding: 20px 0;
    float: left;
}

.avatar {
    object-fit: cover;
}


:deep(.el-upload--picture-card) {
    position: relative;

    width: 80px;
    height: 80px;
    border-radius: 4px;
}


.image-wrapper:hover .actions {
    display: block;
}

.preview-image {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.unsupported-file {
    padding: 0px;
    text-align: center;
    color: #999;
    width: 100%;
    height: 70vh;
}


.myIcon {
    width: 40px;
    height: 40px;
    color: #d2d2d2;
}
</style>