当前位置：首页 > 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组件：

vue实现上传进度

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

注意事项

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

标签: 进度上传

分享给朋友：

vue实现批量上传

Vue 实现批量上传的方法使用 <input type="file"> 和 multiple 属性在 Vue 模板中添加一个文件输入框，设置 multiple 属性以允许选择多个文件。…

Vue实现图片批量上传

Vue 图片批量上传实现方法准备工作安装必要依赖（如axios、element-ui等），确保项目基于Vue 2/3环境。以Vue 3 + Element Plus为例： npm install…

vue怎么实现视频上传

实现视频上传功能在Vue中实现视频上传功能通常需要结合HTML5的<input type="file">元素和后端API。以下是实现方法：前端实现创建文件上传组件模板： <…

Vue实现头像截取上传

Vue实现头像截取上传的方法使用Vue实现头像截取上传功能，可以通过以下步骤完成。主要依赖第三方库vue-cropper或cropperjs实现图像裁剪功能，结合文件上传逻辑完成整个流程。安装依…

php实现上传实例

PHP 文件上传实现在 PHP 中实现文件上传功能需要结合 HTML 表单和 PHP 文件处理逻辑。以下是一个完整的实现示例： HTML 表单部分创建一个包含文件上传字段的表单，确保设置 enc…

php实现上传文件夹

实现文件夹上传的基本思路 PHP原生不支持直接上传整个文件夹，但可以通过前端配合实现。核心思路是前端将文件夹内的文件逐个上传，后端接收并保持原有目录结构。前端HTML部分使用HTML5的webk…

vue实现上传进度