vue前端批量上传带进度
时间: 2023-09-02 19:04:23 浏览: 60
在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需要根据实际情况进行修改,以及进度条的具体样式和布局可以根据需求进行调整。