vue上传文件时显示进度

在Vue中上传多个文件并实时刷新进度条，可以通过使用HTML5的File API和XMLHttpRequest对象来实现。下面是一个简单的示例代码，演示了如何实现这个功能：

首先，在Vue组件中添加一个用于选择文件的input元素和一个用于显示进度条的div元素：

<template>
<div>
<input type="file" multiple @change="handleFiles">
<div v-for="(progress, index) in progresses" :key="index">
<p>{{ index + 1 }}: {{ progress }}%</p>
<progress :value="progress" max="100"></progress>
</div>
</div>
</template>

然后，在Vue组件的methods中定义一个处理文件上传的函数：

methods: {
handleFiles(event) {
const files = event.target.files;
const formData = new FormData();
const xhr = new XMLHttpRequest();
const uploadPercentage = 0;

// 循环遍历所有选中的文件，添加到FormData对象中
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}

// 配置XMLHttpRequest请求的选项
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
// 计算上传进度百分比
const percentage = (event.loaded / event.total) * 100;
// 更新进度条和进度百分比
uploadPercentage += percentage;
this.progresses[i] = uploadPercentage;
}
};

// 发送请求并处理响应
xhr.send(formData);
}
}

在这个示例中，我们使用FormData对象将多个文件添加到XMLHttpRequest请求的body中。然后，我们监听XMLHttpRequest对象的上传进度事件，通过计算已上传文件的大小和总文件大小的比例来更新进度条和进度百分比。注意，我们使用了一个数组来存储每个文件的上传进度百分比，以便在模板中循环渲染每个文件的进度条。