vue+element 上传图片的进度显示

效果展示

HTML

这里用的是element默认的上传地址action,代码如下

<div><el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture":show-file-list="false":on-success='uploadSuccess':on-progress='uploaded'><div>上传</div></el-upload><div class="imgList" v-for="(item,index) in urlList" :key="index"><div class="box" v-if="item.uid == uid"><el-progress type="circle" :percentage="Math.round(item.percentage)"></el-progress></div><img v-if="item.percentage == 100" :src="item.url" alt=""></div>
</div>

data数据

data(){return {urlList:'',  //图片Listuid:null,    //图片唯一的标识id};
},

methods方法

methods:{uploadSuccess(response, file, fileList){this.uid = 1 //随便一个值,上传成功时,进度条消失},uploaded(event, file, fileList){this.urlList = fileListthis.uid = file.uid}
}

css样式

<style lang="scss" scoped>.imgList{width: 100px;height: 100px;border:1px dotted #ccc;position:relative;float: left;img{width: 100px;height: 100px;}.box{position:absolute;left:35px;top:25px;}/deep/ .el-progress-circle{width: 30px!important;height: 30px!important;}/deep/ .el-progress__text{top:150%;}}
</style>

vue+element 上传图片的进度显示相关推荐

vue+element上传图片到阿里云（可直接运行domo）
vue+element上传图片到阿里云,OSS(最简单,最详细,可在线运行domo),不要走弯路了支持格式 jpeg,jpg,png,webp,gif =可限制大小== 4M 安装ali-oss n ...
vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取本地图片 url */ fun ...
vue+element上传图片
1前端 'use strict'; import Component from 'vue-class-component'; import { PageVue, UI, Dict, DropDict ...
vue+element 根据状态，显示不同的操作按钮
效果截图: VUE 核心功能代码片段 <el-table :data="hrs" highlight-current-row v-loading ...
vue使用element 上传图片，修改图片
vue使用element 上传图片,修改图片文章目录 vue使用element 上传图片,修改图片前言一.应用场景 1.上传图片并进行放大预览 2.图片上传代码二.修改已经上传的图片,并展示到 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
Vue + Element 实现进度条 Progress
Vue + Element 进度条 Progress 前言:由于在公司可视化数字大屏项目中用到了,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈话不多说,先直接上效果图,有需要的大家可借鉴 ...
vue element表格某一列内容过多，超出省略号显示
vue element表格某一列内容过多,超出省略号显示 iview表格某一列内容过多,超出省略号显示
VUE+element 上传视频
VUE+element上传视频效果展示 html部分 <el-form-item label="视频上传" prop="storageurl">& ...

vue+element 上传图片的进度显示

效果展示

HTML

data数据

methods方法

css样式

vue+element 上传图片的进度显示相关推荐

最新文章

热门文章