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>

完成!!!

相关推荐
张晓~1833994812141 分钟前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周44 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue771 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃1 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人1 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架