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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

 

### 如何设置 `<el-upload>` 组件使上传文件成为必填项 为了实现 `<el-upload>` 的必填校验功能,可以通过 `v-model` 或者 `ref` 来绑定组件的状态,结合表单验证来完成。以下是具体实现方式: #### 实现方案 1. 将 `<el-upload>` 放入一个 `<el-form-item>` 中。 2. 配置 `prop` 属性用于指定字段名称以便参与表单校验。 3. 自定义校验规则,在提交前判断是否有已上传的文件。 #### 示例代码 以下是一个完整的示例代码片段,展示如何配置 `<el-upload>` 成为必填项进行校验[^1]: ```vue <template> <el-form ref="formRef" :model="formData" :rules="rules"> <!-- 必填的文件上传 --> <el-form-item prop="files"> <el-upload v-model:file-list="formData.files" action="/api/upload" :on-change="handleChange" :before-upload="handleBeforeUpload" multiple > <el-button type="primary">点击上传</el-button> <template #tip> <div class="el-upload__tip">请至少上传一个文件</div> </template> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script setup> import { reactive, ref } from 'vue'; const formRef = ref(null); // 表单数据模型 const formData = reactive({ files: [], // 存储当前选中的文件列表 }); // 校验规则 const rules = { files: [ { required: true, message: '请至少上传一个文件', trigger: ['change', 'blur'], }, ], }; // 当文件状态改变时触发 const handleChange = () => { if (!formData.files.length) { formRef.value.validateField('files'); // 手动触发表单项校验 } }; // 提交前校验 const submitForm = () => { formRef.value.validate((valid) => { if (valid) { console.log('提交成功:', formData); } else { console.error('表单校验未通过'); } }); }; // 文件上传前拦截器 const handleBeforeUpload = (file) => { console.log('即将上传的文件:', file); }; </script> ``` --- #### 关键点解析 1. **`v-model:file-list`** 使用双向绑定的方式管理文件列表,当用户删除或者新增文件时,`formData.files` 会实时更新[^1]。 2. **`required: true`** 在校验规则中声明此字段为必填项,如果文件列表为空,则显示错误提示消息[^1]。 3. **手动触发表单项校验** 如果用户清空了所有文件,需调用 `validateField` 方法重新校验对应字段。 4. **自定义提示信息** 利用插槽 `#tip` 添加额外的文字说明,帮助用户理解操作需求[^1]。 --- ### 注意事项 - 若需要更复杂的逻辑(如限制特定类型的文件),可以在 `before-upload` 函数中扩展业务处理[^2]。 - 对于大文件或批量上传场景,建议引入分片上传机制优化用户体验[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值