vue项目中使用el-upload上传预览tif/tiff文件

vue3需要下载tiff.min.js文件，然后在tiff.min.js文件开头export const TiffV = function()，并且删除开头的{和结尾的}，同时删除tiff.min.js文件结尾的()

 

 vue2可以使用npm install tiff.js，然后通过import Tiff from "tiff.js"

由于tiff.js转换tif/tiff格式的图片的时候是异步的，所以自定义一个支持异步加载图片的组件，如下方代码中<template #tip插槽所示

在使用upload组件的地方引入，全部代码如下所示：

<template>
    <div class="upload-file-wrap">
        <el-upload
            v-model:file-list="filelist
            :class="filelist?.length 8& !ifMultiple ? 'upload-box upload-box-has-img' : upload-box'"
            list-type="picture-card"
            drag
            :disabled="disabled"
            action="#"
            :multiple="ifMultiple"
            :limit="ifMultiple ? 99 : 1"
            :auto-upload="false"
            :accept="acceptType"
            :on-preview="handlePictureCardPreview"
            :on-change="handleFileChange"
            :on-remove="handleRemove"
        >
            <div class="el-upload__text">本地选择照片或将照片直接拖进来</div>
            <template #tip>
                <!-- 支持异步加载图片的组件 -->
                <img class="el-upload-list__item-thumbnail" style="display: none" :src="dialogImageUrl" alt="图片为空" />
            </template>
        </el-upload>
        <el-dialog class="preview-image-dialog" v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="preview Image"/>
        </el-dialog>
</div>
</template>

<script lang="ts" setup>
import { ref,watch,PropType ] from 'vue'
import type  { UploadProps, UploadUserFile } from 'element-plus'
import { EIMessage }  from 'element-plus'
import { Tiffv }  from  ./tiff.min.js
TiffV()
const props = defineProps({
    acceptType:{
        type: String,
        default: 'image/*
    },
    ifMultiple:{
        type: Boolean,
        default: false
    },
    disabled:{
        type: Boolean,
        default: false
    },
    dialogVisible:{
        type: Boolean,
        default: false
    },
    fileListArray:{
        type: Array as PropType<UploadUserFile[]>,
        default: () => []
    },
})

const dialogImageUrl = ref()
const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([])

//抛出事件
const emits = defineEmits(['changFile','removeFile'])

watch(
    () => props.dialogVisible,
    newVal => {
        fileList.value = props.fileListArray
    },
    { immediate: true }
)

图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

const handleFileChange = (files: any，fileList: any) => {
    if(files.size  1924  1024 > 15) {
        EIMessage.error('图片最大不允许超过15M!')
        return false
    }
    if(files.raw.type === 'image/tiff') {
        let fr = new FileReader()
        fr.onload = function (e) {
            let image = new Tiff({ buffer:e.target.result })
            files.url = image.toDataURL()
            dialogImageUrl.value = image.toDataURL()
        }
        fr.readAsArrayBuffer(files.raw)
        emits('changFile",fileList")
        ElMessage.error('tif图片较大，渲染较慢，请耐心等待!')
        return files.url
    }
    emits('changFile",fileList)
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) =>{
    emits('removeFile', uploadFiles , uploadFile)
}
</script>

<style lang="scss">
.upload-box {
    .el-upload.is-drag {
        display: block;
        height: 100px;
        width: 100px;
        .el-upload-dragger {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
    .el-upload-list { 
        display: flex;
        width: 100%;
        .el-upload-list__item {
            width: 100px;
            height: 100px;
            outline: none;
        }
    }
    .el-upload-list__item .el-icon--close-tip {
        display: none !important;
    }
}
.upload-box-has-img {
    el-upload.is-drag {
        display: none !important;
    }
}
/ 预览图片弹窗
.preview-image-dialog {
    max-width: 80% !important;
    width: auto;
    .el-dialog__body {
        margin: 16px !important;
        height: calc(100vh - 194px) !important;
    }
    img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}
</style>