vue前端上传下载进度条

export function export(data,download={}) {
  return request({
    url: '/common/upload',
    method: 'post',
    data: data,
    responseType:'blob',//此参数下载文件流时使用,可不加
    onDownloadProgress: (progressEvent)=> {
        download(progressEvent)
    },
  })
}

使用方法

let param={}
 export(param,showProgess).then(response => {
 })

//自定义一个函数用于接收
showProgess(progress){
  this.progressOpen = true
  this.progressLength =Math.round(progress.loaded / progress.total * 100)
 },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue前端中,实现批量上传带进度的功能可以使用一种常见的方法是结合使用axios和async/await。 首先,需要在Vue项目中安装axios库,可以通过npm命令进行安装。 然后,在Vue组件中引入axios库,并定义一个用于上传文件的方法。在该方法中,使用async/await结合Promise进行异步操作。首先,通过input标签的multiple属性,选择多个文件并存储在一个文件数组中。然后,使用一个for循环遍历文件数组,在每次循环中,创建一个FormData对象,并将当前文件添加到FormData中。接下来,使用axios库发送一个POST请求,将FormData作为请求体,并指定请求的URL。在发送请求前,可以添加一个进度监听器,通过监控上传进度的变化来更新上传进度条。最后,使用await关键字等待所有文件都成功上传,上传结束后可以执行其他的操作,例如显示成功消息。 以下是一个示例代码: ``` <template> <div> <input type="file" multiple @change="handleFileUpload"> <button @click="uploadFiles">上传</button> <div>{{ progress }}%</div> </div> </template> <script> import axios from 'axios'; export default { data() { return { files: [], progress: 0 } }, methods: { handleFileUpload(e) { this.files = Array.from(e.target.files); }, async uploadFiles() { for(let i = 0; i < this.files.length; i++) { let formData = new FormData(); formData.append("file", this.files[i]); await axios.post("上传URL", formData, { onUploadProgress: progressEvent => { this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100); } }); if(i === this.files.length - 1) { alert('所有文件上传成功!'); } } } } } </script> ``` 以上代码实现了一个多文件批量上传并带有进度条的功能。通过选择多个文件,并点击上传按钮,可以将文件依次上传,并显示上传进度。最后,当所有文件都上传成功后,会弹出提示消息。 需要注意的是,示例中的上传URL需要根据实际情况进行修改,以及进度条的具体样式和布局可以根据需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值