El-upload上传文件进度条实时更新的秘密

前端

2023-04-13 19:07:02

在 Vue 中使用 el-upload 组件实现实时进度条更新

在使用 Vue.js 的 el-upload 组件时，上传文件时进度条没有实时更新是一个常见问题。本文将揭示如何解决此问题，让你的进度条流畅、实时。

理解 el-upload

el-upload 组件是基于 HTML5 File API 的，它通过监听文件选择事件，并将选中的文件发送给服务器。上传期间，el-upload 不断发送请求获取上传进度。然而，由于网络延迟或服务器处理时间较长，进度条可能会卡顿。

解决方案

为了解决此问题，我们可以使用以下方法：

1. FormData 对象

FormData 对象可用于发送文件和数据。使用 FormData 上传文件时，我们可以使用 XMLHttpRequest 对象的 upload 属性来监听上传进度。

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

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
  const progress = Math.round((e.loaded / e.total) * 100);
  console.log(progress);
});

xhr.open('POST', 'upload.php');
xhr.send(formData);

2. Axios 库

Axios 库是一个基于 Promise 的 HTTP 请求库。使用 Axios 上传文件时，我们可以使用 onUploadProgress 方法来监听上传进度。

const axios = require('axios');

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

axios.post('upload.php', formData, {
  onUploadProgress: (progressEvent) => {
    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    console.log(progress);
  }
});

3. Vue.js $http 服务

Vue.js http 服务是一个用于发送 HTTP 请求的工具。使用 http 服务上传文件时，我们可以使用 progress 事件来监听上传进度。

const vm = new Vue({
  methods: {
    uploadFile() {
      const formData = new FormData();
      formData.append('file', file);

      this.$http.post('upload.php', formData, {
        progress: (progressEvent) => {
          const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
          console.log(progress);
        }
      }).then((response) => {
        // 上传成功
      }, (error) => {
        // 上传失败
      });
    }
  }
});