vue文件上传进度条,vue如何实现文件下载
本文主要介绍vue项目实现文件下载进度条的功能。本文通过具体的实现代码非常详细的为大家介绍，有需要的朋友可以参考一下。
商业中下载文件有两种常见方式：
第一，直接访问服务器的文件地址，自动下载文件；
第二，服务器返回blob文件流，然后处理并下载文件流。
一般小文件适合第一种下载方案，不会占用太多服务器资源。对于大文件，通常使用文件流进行传输，如图所示：
文件流传输成功后，您可以通过代码启动浏览器立即下载文件流：
这种方法也有缺点。在文件流传输过程中，用户无法感知文件流的传输状态(进度)，会造成一些麻烦(无法确定当前下载操作是否已经生效)。针对这种情况，我们可以在页面上显示文件流的状态和传输进度，提高页面的交互性和友好性。
接下来是具体实现：
Js封装方法：
/**
* @param {Object}数据：{url:文件地址，下载：文件名}
*/
导出函数downLoadAll(数据){
let down progress={ }；
let uniSign=new Date()。getTime()“”；//您可以连续点击下载多个文件。这里，时间戳用于区分每个下载的文件。
axios.get(
data.url，
{ responseType: blob ，头：{ Content-Type : application/JSON；charset=utf-8 }，
onDownloadProgress(进度){
down progress=math . round(100 * progress . loaded/progress . total)//progress对象中的loaded表示下载次数，total表示总次数。在这里，计算百分比。
Store.com MIT( case information/set _ progress ，{path: unisign， progress :down progress })//把这个下载的文件名和下载进度做成一个对象，然后用vuex status来管理。
}}).然后((res)={ //文件流传输完成后，开始文件下载。
if(data.downLoad){
jsFileDownload(res.data，data.downLoad . data.url.replace(/。\./,));//jsFileDownLoad用于下载文件流。下载插件：NPM I js-文件-下载。导入导入：从“js-file-download”导入jsfiledownload
}否则{
jsFileDownload(res.data，data . URL . split(/)[data . URL . split(/)。长度-1])；
}
}).catch((e)={
这个。$message.error(“无法下载此文件”)
})
}
商店中的CaseInfomation.js:
.
常量状态={
ProgressList: []，//文件下载进度列表
.
}
常量突变={
Set _ progress: (state，progress obj)={//修改进度列表
If(state . progress list . length){//如果进度列表存在
if(state . progress list . find(item=item . path==progress obj . path)){/上述路径时间戳是唯一的，所以如果在进度列表中找到当前进度对象
state . progress list . find(item=item . path==progress obj . path)。progress=progressobj.progress//Change当前progress对象的进度
}
}否则{
state . progress list . push(progress obj)//当前进度列表为空，没有下载任务。只需将进度对象添加到进度数组中。
}
},
DEL_PROGRESS: (state，props)={
state . progress list . splice(state . progress list . find index(item=item . path==props)，1)//删除进度列表中的进度对象
},
.
}
显示页面进度弹出代码，downLoadNotice.vue:
模板
/模板
脚本
从“vuex”导入{ mapState }
导出默认值{
名称：下载通知，
计算值：{
.mapState({
progress list :state=state . case information . progress list
})
},
data() {
返回{
Notify: {} //用于维护文件下载进度的弹出对象。
}
},
观察：{//监视进度列表
进度列表：{
处理程序(n) {
let data=JSON . parse(JSON . stringify(n))
data.forEach(item={
const domList=[.document . getelementsbyclassname(item . path)]
If(DOM list . find(I=I . class name==item . path)){/如果页面已经有了这个progress对象的项目符号框，更新它的progress进度。
DOM list . find(I=I . class name==item . path)。innerHTML=item . progress“%”
}否则{
如果(项。progress==null){//这里进行容错处理。如果后端传输文件流报告错误，则删除当前进度对象。
这个。$ store . commit( case information/DEL _ PROGRESS ，item.path)
返回
}//如果页面中没有progress对象对应的子弹框，则在页面上新建一个子弹框，并添加要通知的子弹框对象。属性名是progress对象的路径(从上面可以看出路径是唯一的)，属性值是$notify(通知组件$ notify(元素ui))。
this.notify[item.path]=this。$notify.success({
//标题：信息，
dangerouslyUseHTMLString: true，
消息：` p style= width:100px；下载span class= $ { item . path } style= float:right $ { item . progress } %/span/p `，//显示下载百分比，类名是progress对象的路径(以便以后更新进度百分比)
showClose: false，
持续时间：0
})
}
console.log(item.progress % ，-)
If (item.progress==100) {//如果下载进度达到100%，则关闭子弹盒，删除notify中维护的子弹盒对象。
this . notify[项目.路径]。关闭()
//删除this.notify[item.path]上面的close()事件是异步的。如果在这里直接删除，会报错。使用setTimeout将操作添加到异步队列中。
setTimeout(()={
删除此内容。通知[item.path]
}, 1000)
这个。$ store . commit( case information/del _ progress ，item . path)//删除案例信息中状态progressList中的progress对象
}
})
},
深：真的
}
}
}
/脚本
样式范围
/风格
我们可以将上述代码封装到mixins文件夹中，并将其与mixins混合在页面中：
触发页面中的下载操作：
下载(项目){
let downData={
url: `ipdoc${item.url} `，
下载：项目.文件名
}
这个。$ common utils . download all(down data)//下载
},
最后一页的效果：
最后注意，上面的下载进度并不是真正的下载文件，而是文件流。文件流下载完成后，通过上面的js-file-download插件下载真实文件！
关于vue项目实现文件下载进度条的这篇文章到此为止。更多关于vue文件下载进度条的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。