基于vue+element-ui实现上传进度条

基于el-upload组件实现进度条的编写

后台进度前台进度条显示

基于el-upload组件实现进度条的编写

①编写文件上传时的钩子函数

 uploadProgress(event,file,fileList){let _self = this;if(event.lengthComputable){let val = (event.loaded / event.total * 100 ).toFixed(0);var progress = parseInt(val);_self.percentage = progress;}},

②监听进度百分比

后台进度前台进度条显示

参考文章：后台进度前台显示进度条_weixin_30646505的博客-CSDN博客

后端思路：

①创建一个类，封装进度变量

②创建一个全局map，用于存放不同用户的进度数据，key为用户的id(一定唯一)，value即为进度条的实际进度

 private Map<Long,Percentage> map=new HashMap<>();

③主方法执行操作，每完成一步操作即进度加一

④辅助方法返回当前操作的进度

前端思路：

①主请求请求操作

② 辅助请求为定时任务，每隔一段时间去请求操作的进度

var proNum = setInterval(function(){me.$http({url: me.$http. adornUrl(`/bim/ifcdata/parse/percentage/${id}`),method: 'get',params: me.$http.adornParams({})}).then(({data})=>{if(data.msg == "success"){var prog = data.data;console.log("num => "+prog);me.percentage = Math.round(( prog / me.total) * 100, 2);console.log("percentage =>"+ me.percentage);if(me.percentage == 100){proNum="";}}})},3000);

基于vue+element-ui实现上传进度条相关推荐

Vue element ui + AmazonS3上传文件功能
一.在上传之前,需要先获取到AWS的S3服务的Access key ID和Secret access key 二.代码代码: <template><div class="u ...
element ui视频上传（已上线，拿去即用）
element ui视频上传 + 进度条实现(拿去即用) 1.template 部分 2. script 部分 3. scss 部分 1.template 部分 <template>< ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
vue+天翼云OOS文件存储+上传进度条
在使用天翼云文件存储时,发现官方文档里写的不太多.网上相关的资料也很少,关于上传进度条的更是几乎没有.跟官方的技术人员对接后,整理前端使用教程如下: 在public文件夹下放置天翼云OOS的js文件, ...
html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打 ...
大文件上传进度条显示（仿CSDN资源上传效果） .
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...

基于vue+element-ui实现上传进度条

基于el-upload组件实现进度条的编写

后台进度前台进度条显示

基于vue+element-ui实现上传进度条相关推荐

最新文章

热门文章