Vue3封装图片流形式单张图片预览

图片预览组件：

<template>
    <!-- element-plus内置图片预览组件 -->
    <el-image-viewer 
        v-if="viewerImage.visible" 
        :urlList="viewerImage.urlList" 
        @close="closeViewer"
    />
</template>

<script setup>
import { reactive } from "vue";
import { ElLoading } from 'element-plus'

const viewerImage = reactive({
    visible: false,
    urlList: [],
})

// 关闭
const closeViewer = () => {
    viewerImage.visible = false;
    // 释放ObjectUrl类型的内存
    viewerImage.urlList.forEach(src => {
        if(src.includes('blob')) {
            URL.revokeObjectURL(src);
        }
    })
}

// 外部以api的形式调用，单张图片预览
const view = (src) => {
    if(src) {
        viewerImage.urlList = [src];
        viewerImage.visible = true;
    }
}

// 外部调用loading
let loading = null;
const setLoading = (isLoading) => {
    if(isLoading) {
        loading = ElLoading.service({
            lock: true,
            text: '加载中...',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        return;
    }
    loading && loading.close();
}

defineExpose({
    view,
    setLoading
})
</script>

<style lang="scss" scoped>
</style>

调用：

<SingleImageViewer ref="imageViewerRef"/>

// 1.请求返回图片流形式：
imageViewerRef = ref();
const viewImage = () => {
    imageViewerRef.value.setLoading(true);
    Api(...).then(file => {
        let src = URL.createObjectURL(file);
        imageViewerRef.value.setLoading(false);
        imageViewerRef.value.view(src);
    });
}

// 2.直接预览：
imageViewerRef.value.view(src);