当前位置：首页 > VUE

vue实现上传进度

2026-03-09 13:16:24VUE

Vue 实现上传进度

在 Vue 中实现文件上传进度功能，通常需要结合 XMLHttpRequest 或第三方库（如 axios）来监听上传进度事件。以下是几种常见的实现方法：

使用原生 XMLHttpRequest

通过 XMLHttpRequest 的 upload 属性可以监听上传进度事件。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <div v-if="progress > 0">
      上传进度: {{ progress }}%
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const xhr = new XMLHttpRequest();
      const formData = new FormData();
      formData.append('file', file);

      xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
          this.progress = Math.round((e.loaded / e.total) * 100);
        }
      });

      xhr.open('POST', '你的上传接口URL', true);
      xhr.send(formData);
    }
  }
};
</script>

使用 axios

axios 提供了 onUploadProgress 回调函数来监听上传进度。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <div v-if="progress > 0">
      上传进度: {{ progress }}%
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    async handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const formData = new FormData();
      formData.append('file', file);

      try {
        await axios.post('你的上传接口URL', formData, {
          onUploadProgress: (progressEvent) => {
            if (progressEvent.lengthComputable) {
              this.progress = Math.round(
                (progressEvent.loaded / progressEvent.total) * 100
              );
            }
          }
        });
        console.log('上传成功');
      } catch (error) {
        console.error('上传失败', error);
      }
    }
  }
};
</script>

使用 Element UI 的上传组件

如果项目中使用了 Element UI，可以直接使用其上传组件 el-upload，它内置了上传进度显示功能。

<template>
  <el-upload
    action="你的上传接口URL"
    :on-progress="handleUploadProgress"
    :before-upload="beforeUpload"
  >
    <el-button type="primary">点击上传</el-button>
    <div slot="tip">上传进度: {{ progress }}%</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    handleUploadProgress(event, file) {
      this.progress = Math.round(event.percent);
    },
    beforeUpload(file) {
      // 上传前的校验逻辑
      return true;
    }
  }
};
</script>

使用第三方库（如 vue-upload-component）

vue-upload-component 是一个专门为 Vue 设计的文件上传组件，支持上传进度显示。

vue实现上传进度

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      @input-filter="inputFilter"
      @input-file="inputFile"
      :post-action="'你的上传接口URL'"
    >
      上传文件
    </file-upload>
    <div v-if="progress > 0">
      上传进度: {{ progress }}%
    </div>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: [],
      progress: 0
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 文件选择后的处理
      }
    },
    inputFile(newFile, oldFile) {
      if (newFile && !oldFile) {
        this.progress = newFile.progress;
      }
    }
  }
};
</script>