vue页面加载进度条,vue 进度条
这篇文章主要介绍了某视频剪辑软件文件下载进度条的实现原理，通过使用onDownloadProgress方法应用程序接口获取进度及文件大小等数据，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
目录
需求场景：实现原理：优化过程：下载方法的组件引入mixinVuex配置进度条最终效果图参考文章：
需求场景：
1、大文件压缩过后依旧很大，接口返回反应速度过慢，页面没有任何显示，体验太差。
2、需要在浏览器显示正在加载中的状态优化显示，提高用户体验
实现原理：
1、使用onDownloadProgress方法应用程序接口获取进度及文件大小等数据
2、混合混入实现监听进度条进度
3、vuex修改进度条进度
优化过程：
使用onDownloadProgress封装一个下载文件的方法
向下文件进度：函数(url，params，headers，blenderApiUrl，callback，uniSign) {
返回axios({
网址：网址，
params: params，
方法：“得到”，
响应类型：“blob”，
baseURL: blenderApiUrl，
标题：标题，
onDownloadProgress(进度){
回调（进度，未签名)
}
})
}
在下载文件的地方，使用封装的方法向下填充进度
downOrgFile (row) {
let uniSign=` $ {新日期()。getTime()} ` //可能会连续点击下载多个文件，这里用时间戳来区分每一次下载的文件
const url=`${this .$api .人寿保险场景2下载文件}/$ { row。account _ name }/$ { row。task _ id } ` 1
const基本URL=this。iframedata。blenderapiurl
这个http . $ downfileprogress(URL，{}，this.headers，baseUrl，this.callBackProgress，uniSign).然后(res={
如果(!res) {
这个 sweetAlert.errorWithTimer(文件下载失败!)
返回
}
如果(窗口类型。领航员。mssavelob！==未定义){
窗户。领航员。mssavelob(新 Blob([res.data])，中间项下载. zip’)
}否则{
设url=window .URL.createObjectURL(新Blob([res.data]))
让链接=文档。createelement( a )
link.style.display=none
link.href=url
link.setAttribute(download ， xxx.zip )
document.body.appendChild(链接)
link.click()
link.remove()
}
})
},
callBackProgress (progress，uniSign) {
让总数=进步。加速。getresponse标头(“真实内容长度”)
//进度对象中的加载表示已经下载的数量，总计表示总数量，这里计算出百分比
让进步失望=数学。楼((进步。加载/总计)* 100)
//将此次下载的文件名和下载进度组成对象再用状态管理状态管理
这个store.commit(SET_PROGRESS ，{ path: uniSign，progress: downProgress })
}
创建成分同等级混入类文件夹，文件夹创建索引。射流研究…
从" vuex "导入{ mapState }
导出常量混合={
计算值：{
.mapState({
进度列表：状态=状态。进度列表
})
},
data () {
返回{
通知：{} //用来维护下载文件进度弹框对象
}
},
观察：{
//监听进度列表
进度列表：{
处理程序(n) {
设data=JSON。解析(JSON。纤细的
data.forEach(item={
const domList=[.文档。getelementsbyclassname(item。路径)]
if(DOM列表。find(I=I . class name===item。路径)){
//如果页面已经有该进度对象的弹框，则更新它的进度进步
如果(项。进度)DOM列表。find(I=I . class name===item。路径).innerHTML=item。进度" % "
if (item.progress===null) {
//此处容错处理，如果后端传输文件流报错，删除当前进度对象
这个store.commit(DEL_PROGRESS ，item.path)
这个. notify.error({ title:错误，消息： 文件下载失败！})
}
}否则{
//如果页面中没有该进度对象所对应的弹框，页面新建弹框，并在通知中加入该弹框对象，属性名为该进度对象的路径（上文可知小路是唯一的),属性值为$notify(元素用户界面中的通知组件)弹框对象
this . notify[项目.路径]=this .$notify.success({
dangerouslyUseHTMLString: true，
自定义类别：进度-通知，
消息：` p style= width:150 px；行高：13px 中间项正在下载span class= $ { item .path } style= float:right $ { item。progress } %/span/p `，//显示下载百分比，类名为进度对象的路径（便于后面更新进度百分比)
显示关闭：没错，
持续时间：0
})
}
if (item.progress===100) {
//如果下载进度到了100%,关闭该弹框，并删除通知中维护的弹框对象
//this.notify[item.path].关闭()
//上面的关闭()事件是异步的，直接删除此内容。通知[item.path]会报错，利用setTimeout，将该操作加入异步队列
setTimeout(()={
删除此内容。通知[item.path]
}, 1000)
这个. store.commit(DEL_PROGRESS ，item.path) //删除案例信息中状态的进步人士中的进度对象
}
})
},
深：真的
}
}
}
下载方法的组件引入mixin
从导入{ mixins }./mixin/index
导出默认值{
mixins: [mixins]，
.
}
Vuex配置进度条
常量状态={
进度列表：[]
}
导出默认状态
常量突变={
SET_PROGRESS: (state，progressObj)={
//修改进度列表
if (state.progressList.length) {
//如果进度列表存在
如果(状态。进度列表。find(item=item。路径===进度对象。路径)){
//前面说的小路时间戳是唯一存在的，所以如果在进度列表中找到当前的进度对象
状态。进度列表。find(item=item。路径===进度对象。路径).progress=progressObj.progress
//改变当前进度对象的进步
}
}否则{
//当前进度列表为空，没有下载任务，直接将该进度对象添加到进度数组内
状态。进度列表。推送(进度对象)
}
},
DEL_PROGRESS: (state，props)={
状态。进度列表。拼接(状态。进度列表。查找索引(item=item。path===props)，1) //删除进度列表中的进度对象
},
CHANGE_SETTING: (state，{ key，value })={
//eslint-disable-next-line no-prototype-builtins
if (state.hasOwnProperty(key)) {
状态[键]=值
}
}
}
导出默认突变
export const getProgressList=state=state。进度列表
导出常量更改设置=函数({ commit }，data) {
提交(更改设置，数据)
}
export const set progress=function({ commit }，data) {
提交(“SET_PROGRESS”，数据)
}
export const del progress=function({ commit }，data) {
提交( DEL_PROGRESS ，数据)
}
最终效果图
参考文章：
juejin.cn/post/702437…
到此这篇关于某视频剪辑软件文件下载进度条的实现过程的文章就介绍到这了，更多相关某视频剪辑软件下载进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。