el-upload 上传一张图片，并支持预览和删除

最新推荐文章于 2024-03-27 15:19:47 发布

编程（变成）小辣鸡

最新推荐文章于 2024-03-27 15:19:47 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_52803316/article/details/131306562

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<template>

    <el-upload
        class="upload-demo"
        :class="{disabled:cardUpFileList.length>0 ? true:false}"
        :limit="1"
        list-type="picture-card"
        accept=".png,.jpg"
        :file-list="cardUpFileList"
        :before-upload="beforeUploadPath "
        :on-remove="handleRemovePicture"
        :on-preview="handlePicturePreview"
    >
        <el-icon><Plus /></el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisible">
         <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>

<script setup>
    import {ref,reactive} from 'vue'
    import {ElMessage,ElMessageBox} from 'element-plus'
    import {uploadImg} from '@/api/xx/common.js';  //uploadImg  这个是后台上传文件接口

    let cardUpFileList=ref([]);
    let dialogVisible=ref(false);
    let dialogImageUrl=ref();

    
     //上传图片
    const beforeUploadPath = (file) => {
        const isLt2M = file.size / 1024 / 1024 < 20;
        if (!isLt2M) {
            ElMessage.error('上传图片大小不能超过 20MB！');
            return;
        }
        let fd = new FormData();
        fd.append('file', file);
        uploadImg(fd,'sellerApply').then(res=>{    //uploadImg  这个是后台上传文件接口
            if(res.state!=200){
                ElMessage.error(res.msg);
                return;
            }
            cardUpFileList.value.push({url:res.data.url})
        });
        return false;
    };
    //删除身份证正面图片
    const handleRemovePicture =(file,files)=>{
        cardUpFileList.value = files;
    };
    //图片预览
    const handlePicturePreview= (file,files) => {
        dialogImageUrl.value = file.url;
        dialogVisible.value = true
    }

</script >

<style lang="scss">

    .disabled .el-upload--picture-card {
        display: none;
    }
</style>