Vue 文件上传进度条实现指南

要显示 Vue 文件上传的进度，您可以使用 Vue 上传组件和进度条组件。以下是一些示例代码：

HTML 模板：

<template>
  <div>
    <input type='file' @change='uploadFile' />
    <progress v-if='uploadProgress !== null' :value='uploadProgress' max='100'></progress>
  </div>
</template>

Vue 组件：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploadProgress: null,
    };
  },
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/api/upload', formData, {
        onUploadProgress: progressEvent => {
          this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      }).then(() => {
        this.uploadProgress = null;
        console.log('File uploaded successfully');
      }).catch(error => {
        console.log(error);
      });
    },
  },
};
</script>

这个示例代码假设您正在使用 Axios 进行文件上传。在上传期间，进度条将显示上传进度。一旦上传完成，进度条将消失并在控制台中打印出成功消息。