当前位置：首页 > VUE

vue实现上传进度

2026-02-18 00:33:50VUE

Vue实现上传进度的方法

使用axios的onUploadProgress方法

在Vue项目中，可以通过axios的onUploadProgress回调函数实时获取上传进度。以下是一个示例代码片段：

vue实现上传进度

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

<script>
import axios from 'axios';

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

      axios.post('/upload', formData, {
        onUploadProgress: (progressEvent) => {
          this.uploadProgress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      }).then(response => {
        console.log('上传成功', response);
      }).catch(error => {
        console.error('上传失败', error);
      });
    }
  }
};
</script>

使用XMLHttpRequest实现

如果不使用axios，可以直接使用XMLHttpRequest的upload事件来监听上传进度：

vue实现上传进度

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0];
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file);

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

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

使用第三方库

如果需要更复杂的上传功能，可以考虑使用第三方库如vue-upload-component或uppy：

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

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

进度条样式优化

可以根据需求自定义进度条的样式，例如使用Vuetify的v-progress-linear组件：

<template>
  <v-progress-linear
    v-model="uploadProgress"
    color="primary"
    height="10"
  ></v-progress-linear>
</template>

注意事项

确保后端接口支持分块上传或能够正确返回上传进度信息。某些服务器可能需要额外配置才能支持进度跟踪功能。

标签: 进度上传

分享给朋友：

vue上传视频实现

使用 <input type="file"> 上传视频创建文件选择控件，限制文件类型为视频格式（如 .mp4, .webm）。通过 @change 事件监听文件选择，获取 File 对象…

vue实现圆环进度

Vue 实现圆环进度的方法使用 SVG 实现圆环进度 SVG 是实现圆环进度的常用方法，通过 stroke-dasharray 和 stroke-dashoffset 属性可以轻松控制进度条的显示。…

vue实现切片上传

切片上传的实现原理切片上传是将大文件分割成多个小块（切片）分别上传，最后在服务端合并。这种方式能提高上传效率、支持断点续传和并发上传。前端实现步骤使用Vue实现切片上传需要借助File…

vue实现视频上传

Vue 实现视频上传的方法使用原生 input 元素和 FormData 在 Vue 中可以通过原生 input 元素结合 FormData 实现视频上传功能。创建一个文件选择输入框，监听文件变化事…

vue实现图片压缩上传

实现图片压缩上传的方法使用HTML5的Canvas进行压缩通过Canvas的drawImage和toDataURL方法实现图片压缩。创建一个input元素用于选择图片，监听change事件处理压缩…

vue实现上传头像显示

Vue 实现上传头像并显示前端实现（Vue 3 + Element Plus）模板部分 <template> <div class="avatar-upload">…

vue实现上传进度