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

一、vue2可以使用第三方库 tiff.js，然后通过import Tiff from "tiff.js"引入

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

<el-upload
                ref="lg_uploadPic"
                action=""
                :class="hideAddButton ? 'upload_pic upload_pic_title' : 'upload_pic_title'"
                list-type="picture-card"
                :on-preview="handlePreviewPic"
                :on-remove="fileHandleRemovePic"
                :before-remove="fileBeforeRemoveCheck"
                :on-success="fileUploadSuccess"
                :on-error="handleUploadError"
                :on-change="picHandleChange"
                :auto-upload=false
                :http-request="uploadFile"
                :multiple=isMultiple
                :disabled="fileDisabled"
                :file-list="picSuccessList">
                <template #tip>
                    <!-- 支持异步加载图片的组件 -->
                    <img class="el-upload-list__item-thumbnail" style="display: none" :src="dialogImageUrl" alt="图片为空" />
                </template>
            <i class="el-icon-plus"></i>
        </el-upload>
        <!--图片预览框-->
        <el-dialog title="预览" id="showorhidden" :visible.sync="dialogVisible" width="40%">
            <div id="showPic">
                <img width="100%" :src="dialogImageUrl">
            </div>
        </el-dialog>

找到on-change方法，在这里进行添加判断条件并把.tif格式进行转换

        picHandleChange(file, fileList) {
            // 判断是否是tif格式
            if(file.raw.type === 'image/tiff'){
                let fr = new FileReader();
                fr.onload = function (e){
                    let image = new Tiff({buffer:e.target.result});
                    file.url = image.toDataURL();
                    dialogImageUrl.value = image.toDataURL();
                }
                fr.readAsArrayBuffer(file.raw);
                this.$emit("changFile","fileList");
                ElMessage.error('tif图片较大，渲染较慢，请耐心等待!');
                return file.url;
            }
            this.$emit("changeFile",fileList);
        }

若出现了上传tif再上传png其他格式图片，tif会消失，可以用下面的办法

            if(file.raw.type === 'image/tiff'){
                let fr = new FileReader();
                fr.onload = function (e){
                    let image = new Tiff({buffer:e.target.result});
                    file.url = image.toDataURL();
                    this.dialogImageUrl = image.toDataURL();
                }
                fr.readAsArrayBuffer(file.raw);
                this.$emit("changFile","fileList");
                console.log(fileList,1111111);
            }

 

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