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

使用Vue和ElementPlus实现限制上传图片功能

原创已于 2025-01-05 23:04:43 修改 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2023-06-20 14:43:47 首次发布

vue 专栏收录该内容

10 篇文章

订阅专栏

该代码段展示了如何在Vue应用中利用ElementPlus组件库实现一个限制为一张图片的上传功能，支持图片预览、删除和大小限制。图片上传前会检查文件大小不超过20MB，超过则显示错误信息。上传成功后，图片URL会被添加到列表中。

<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>