当前位置：首页 > VUE

vue实现上传进度

2026-02-18 00:33:50VUE

Vue实现上传进度的方法

使用axios的onUploadProgress方法

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

<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事件来监听上传进度：

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实现上传进度

标签: 进度上传

分享给朋友：

h5怎么实现上传视频

使用HTML5实现视频上传 HTML5提供了<input type="file">元素用于文件上传，结合<video>标签可以实现视频上传和预览功能。 <input t…

vue实现分段上传

实现分段上传的基本思路分段上传（分片上传）是将大文件分割成多个小块分别上传，最后在服务器合并的技术。这种方式能提高上传稳定性、支持断点续传，并减轻服务器压力。前端实现步骤安装依赖需要axi…

vue实现上传头像

使用 Vue 实现上传头像前端实现创建一个文件上传组件，使用 <input type="file"> 元素选择文件，并通过 FileReader 预览图片。 <template…

php 实现上传视频

上传视频的基本流程在PHP中实现视频上传功能需要处理文件接收、验证、存储等步骤。核心是通过$_FILES超全局变量获取上传的文件信息，结合move_uploaded_file函数完成存储。创建H…

vue实现上传封面

Vue 实现上传封面功能使用原生 input 文件上传在 Vue 中可以通过原生 HTML 的 input 元素实现文件上传功能。创建一个文件输入框，监听 change 事件获取用户选择的文件。…

vue实现图片重新上传

实现图片重新上传功能在Vue中实现图片重新上传功能，通常涉及文件选择、预览、上传和重置等步骤。以下是一个完整的实现方案：模板部分 <template> <div>…

vue实现上传进度