当前位置：首页 > VUE

vue实现上传进度

2026-03-30 01:02:51VUE

Vue 实现上传进度的方法

使用 axios 的 onUploadProgress 属性

在 Vue 中可以通过 axios 的 onUploadProgress 属性实现上传进度显示。该属性接收一个回调函数，参数为进度事件对象，包含已上传字节和总字节信息。

// 示例代码
uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/upload', formData, {
    onUploadProgress: (progressEvent) => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      this.uploadPercentage = percentCompleted;
    }
  });
}

使用原生 XMLHttpRequest 对象

如果不使用 axios，可以直接通过 XMLHttpRequest 的 upload 属性监听进度事件。

// 示例代码
uploadFile(file) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file);

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

  xhr.open('POST', '/upload', true);
  xhr.send(formData);
}

在模板中显示进度条

在 Vue 模板中可以通过绑定进度值到进度条组件或自定义样式来显示上传进度。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <progress :value="uploadPercentage" max="100"></progress>
    <span>{{ uploadPercentage }}%</span>
  </div>
</template>

使用第三方库

如果需要更复杂的功能，可以考虑使用专门的文件上传库如 vue-upload-component 或 dropzone，这些库内置了进度显示功能。

// 示例使用 vue-upload-component
import VueUploadComponent from 'vue-upload-component';

export default {
  components: {
    'file-upload': VueUploadComponent
  },
  methods: {
    onProgress(file) {
      this.uploadPercentage = file.progress;
    }
  }
}

错误处理和取消上传

实现上传进度时还应考虑错误处理和取消上传的功能。

vue实现上传进度

// 示例代码
uploadFile(file) {
  const cancelToken = axios.CancelToken;
  const source = cancelToken.source();

  axios.post('/upload', formData, {
    onUploadProgress: (progressEvent) => {
      // 进度处理
    },
    cancelToken: source.token
  }).catch(error => {
    if (axios.isCancel(error)) {
      console.log('Upload canceled');
    } else {
      console.error('Upload error:', error);
    }
  });

  // 取消上传
  this.cancelUpload = () => {
    source.cancel('Operation canceled by the user.');
  };
}

以上方法可以根据具体需求选择适合的方式实现上传进度功能。