elementUI——upload限制图片或者文件只能上传一个——功能实现

你的名字 2022-09-16 11:20 1990阅读 1赞

最近在写后台管理系统时，遇到一个需求，就是上传图片，有且仅能上传一张。

效果图如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
功能描述：上传图片时，仅支持单选，如果上传图片成功后，展示图片，并隐藏添加图片的按钮。删除图片后，上传按钮展示。

# `html`部分代码 #

<el-upload action="/file/Upload?module=EQ" accept="image/jpeg,image/jpg,image/png" :limit="1" :on-change="handleLimit" :class="{disabled:eqObj.uploadDisabled}" list-type="picture-card" :on-success="handleSuccess" :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>

1.action:上传图片的地址，也可以使用`http-request`方法覆盖原有支持的上传函数
    
    2.accept：上传图片支持的格式，如果是上传文件，也可以写文件的格式，用于选择图片或者文件时的筛选
    
    3.limit:显示文件上传的个数，这个个数仅限制本次上传的个数，而非总数，因此还需要根据on-change函数进行判断
    
    4.on-change:监听on-change(文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用)函数，来判断已经上传的数目
    
    5.list-type:文件列表的类型，有text/picture/picture-card三种类型
    
    6.on-success:文件上传成功后的回调函数，上传成功后可以拿到对应图片的线上地址，用于赋值给对应的参数
    
    7.on-remove:删除文件，如果删除文件后的回调函数

# `css`部分代码 #

.disabled .el-upload.el-upload--picture-card { 
        display: none !important;
    }
    
    .disabled .el-button--success.is-plain { 
        display: none !important;
    }

如果添加了`disabled`的类名，则可以将添加图片的样式进行隐藏，就可以实现仅能上传特定数目了

# `js`部分代码 #

限制文件个数，可以通过监听`on-change`事件来处理：

handleLimit(file, fileList) { 
        if (fileList.length >= 1) { 
            this.eqObj.uploadDisabled = true;
            this.$set(this.eqObj, 'uploadDisabled', true);
        } else { 
            this.eqObj.uploadDisabled = false;
            this.$set(this.eqObj, 'uploadDisabled', false);
        }
        this.$forceUpdate();
    },

图片上传成功后的回调：

handleSuccess(response, file, fileList) { 
        if (response.success) { 
            this.eqForm.image = response.filepath;
        }
    },

删除图片后的回调：

handleRemove(file, fileList) { 
        console.log(file, fileList);
        this.eqObj.uploadDisabled = false;
        this.$forceUpdate();
    },

# 注意：如果通过`this.$set`无法将对象的参数改变，则可以使用`this.$forceUpdate()`的方式来处理 #

# 按钮样式的上传功能： #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_9_color_FFFFFF_t_70_g_se_x_16]

# `html`部分代码 #

<el-upload class="upload-demo" style="margin-top:4px;display:inline-block;" :show-file-list="false"
               action="/file/Upload?module=NoMainPackagePic" :file-list="[]"
               multiple
               :on-success="onSuccess">
        <el-button size="mini" type="success" plain>上传图片</el-button>
    </el-upload>

完成！！！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1b1a04fd9cf342bd9ae2b0bcadc90866.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/10a99a5f9f5146268ac9eea827e316de.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2c3c5cd6f2a44fa6bb4f60fef7551807.png