vue实现上传文件进度条

在Vue中实现文件上传进度条可以通过使用axios库来发送文件请求，并结合HTML5的FormData对象来实现。以下是一个简单的示例代码：

首先，在你的Vue组件中，引入axios库：

import axios from 'axios';

然后，创建一个data属性来存储上传进度相关的数据：

data() {
  return {
    file: null, // 保存要上传的文件
    progress: 0, // 上传进度
  };
},

接下来，创建一个方法来处理文件上传：

methods: {
  handleFileUpload(event) {
    this.file = event.target.files[0]; // 获取要上传的文件

    // 创建FormData对象
    let formData = new FormData();
    formData.append('file', this.file);

    // 发送文件请求
    axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      onUploadProgress: progressEvent => {
        this.progress = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        ); // 更新上传进度
      },
    })
      .then(response => {
        // 处理上传成功的响应
      })
      .catch(error => {
        // 处理上传失败的错误
      });
  },
},

最后，在模板中添加文件上传的input元素和进度条：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <div>{{ progress }}%</div>
    <div class="progress-bar">
      <div class="progress-bar-inner" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>

<style>
.progress-bar {
  width: 200px;
  height: 20px;
  border: 1px solid #ccc;
}

.progress-bar-inner {
  height: 100%;
  background-color: #00a0e9;
}
</style>

这样，当用户选择文件后，文件将被上传到服务器，并且进度条会实时更新上传进度。注意要将`/upload`替换为你的服务器端接收文件上传的URL。