elementUI——upload限制图片或者文件只能上传一个——公开版

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

效果图如下:

功能描述:上传图片时,仅支持单选,如果上传图片成功后,展示图片,并隐藏添加图片的按钮。删除图片后,上传按钮展示。

html部分代码

js 复制代码
 <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部分代码

js 复制代码
.disabled .el-upload.el-upload--picture-card {
    display: none !important;
}

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

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

js部分代码

限制文件个数,可以通过监听on-change事件来处理:

js 复制代码
 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();
},

图片上传成功后的回调:

js 复制代码
handleSuccess(response, file, fileList) {
    if (response.success) {
        this.eqForm.image = response.filepath;
    }
},

删除图片后的回调:

js 复制代码
handleRemove(file, fileList) {
    console.log(file, fileList);
    this.eqObj.uploadDisabled = false;
    this.$forceUpdate();
},

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

按钮样式的上传功能:

html部分代码

js 复制代码
<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>

完成!!!

相关推荐
小吕学编程17 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041224 分钟前
Netty编解码器详解与实战
前端
袁煦丞29 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript
GetcharZp2 小时前
xterm.js 终端神器到底有多强?用了才知道!
前端·后端·go