vue项目实现上传进度条

     *## 要在 Vue 前端应用中实现文件上传进度条，您可以使用 XMLHttpRequest 对象来处理文件上传，并利用其提供的进度事件来获取上传进度信息。以下是一种实现方法：

1. 在 Vue 组件中，添加一个文件选择框和进度条元素。

在上述代码中，我们添加了一个文件选择框，通过 @change 事件绑定一个上传文件的方法 uploadFile。同时，根据条件 showProgress 控制进度条是否显示，并将上传进度绑定到进度条的 value 属性 uploadProgress 上。

   2. 在 Vue 组件的 data 中定义相关的数据属性。

data() {

return {

// 控制进度条显示/隐藏

showProgress: false,

// 上传进度数据

uploadProgress: 0，

};

}

在上述代码中，我们定义了两个数据属性：showProgress 控制进度条的显示和隐藏，uploadProgress 存储当前的上传进度。

.  3. 在 Vue 的 methods 中定义文件上传方法 uploadFile。

methods: {

uploadFile() {

// 获取选择的文件

const file = this.$refs.fileInput.files[0];

// 创建一个 FormData 对象，并将文件添加进去

const formData = new FormData();

formData.append('file', file);

// 创建一个 XMLHttpRequest 对象

const xhr = new XMLHttpRequest();

// 监听上传进度事件

xhr.upload.addEventListener('progress', (event) =>

{

if (event.lengthComputable) {

// 计算上传进度的百分比

const progressPercent = Math.round((event.loaded / event.total) * 100);

// 更新上传进度数据

this.uploadProgress = progressPercent;

}

});

// 监听上传完成事件 xhr.addEventListener('load', () => {

// 上传完成后的操作

---此处省略---

});

// 发送文件上传请求

xhr.open('POST', '/upload-url');

xhr.send(formData);

// 显示进度条

this.showProgress = true;

} }

在上述代码中，我们通过原生的 XMLHttpRequest 对象创建一个文件上传请求，并监听 progress 事件来获取上传进度。在进度事件处理函数中，我们根据已上传和总共的字节数计算并更新上传进度的百分比数据。