vue分片上传如何获取上传进度

在Vue中进行分片上传时获取上传进度的核心方法包括以下几点：1、使用Axios拦截器获取上传进度，2、通过分片计算总进度，3、实时更新进度条。 其中，使用Axios拦截器获取上传进度是关键步骤。Axios提供了onUploadProgress配置项，可以在上传过程中实时获取进度信息，通过这个功能我们可以实时计算和显示上传进度。

一、使用AXIOS拦截器获取上传进度

在进行分片上传时，我们需要使用Axios库来发送HTTP请求。Axios提供了一个onUploadProgress事件，可以用来监听上传进度。以下是一个基本的实现示例：

import axios from 'axios';

const uploadChunk = (chunk, url, onUploadProgress) => {
  const formData = new FormData();
  formData.append('file', chunk);
  return axios.post(url, formData, {
    onUploadProgress: (progressEvent) => {
      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      onUploadProgress(percentCompleted);
    }
  });
};

解释：

• 创建一个FormData对象并将文件分片添加到其中。
• 使用Axios的post方法发送请求，并传递onUploadProgress回调函数。
• 在onUploadProgress回调中计算上传的百分比，并调用传递进来的onUploadProgress回调函数。

二、通过分片计算总进度

为了计算整个文件上传的总进度，我们需要将每个分片的进度累加起来。假设我们有一个文件被分成了多个分片，我们可以通过以下步骤来计算总进度：

1. 将文件分成多个分片。
2. 对每个分片进行上传，并在每次上传完成后更新总进度。
3. 实时更新进度条。

以下是一个示例代码：

const uploadFileInChunks = async (file, url, onTotalProgress) => {

  const chunkSize = 1024 * 1024; // 1MB
  const totalChunks = Math.ceil(file.size / chunkSize);
  let uploadedChunks = 0;
  for (let start = 0; start < file.size; start += chunkSize) {
    const chunk = file.slice(start, start + chunkSize);
    await uploadChunk(chunk, url, (percentCompleted) => {
      const totalPercentCompleted = Math.round(((uploadedChunks + percentCompleted / 100) / totalChunks) * 100);
      onTotalProgress(totalPercentCompleted);
    });
    uploadedChunks += 1;
  }
};

解释：

• 将文件分成多个1MB大小的分片。
• 使用一个循环遍历每个分片，并调用uploadChunk函数进行上传。
• 在每个分片上传完成后，更新已上传的分片数量，并根据当前分片的上传进度计算总进度。
• 调用onTotalProgress回调函数更新总进度。

三、实时更新进度条

为了在用户界面上显示上传进度，我们可以使用Vue的响应式特性来实时更新进度条。以下是一个示例组件：

<template>

  <div>
    <input type="file" @change="handleFileChange" />
    <div v-if="uploadProgress >= 0">
      <progress :value="uploadProgress" max="100"></progress>
      <span>{{ uploadProgress }}%</span>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';
import { uploadFileInChunks } from './uploadService'; // 包含上面定义的函数
export default {
  setup() {
    const uploadProgress = ref(-1);
    const handleFileChange = async (event) => {
      const file = event.target.files[0];
      if (file) {
        uploadProgress.value = 0;
        await uploadFileInChunks(file, '/upload', (progress) => {
          uploadProgress.value = progress;
        });
      }
    };
    return {
      uploadProgress,
      handleFileChange
    };
  }
};
</script>

解释：

• 在模板中使用<input type="file">来选择文件。
• 当文件选择发生变化时，调用handleFileChange处理文件上传。
• 使用Vue的响应式ref来存储上传进度，并在上传过程中实时更新该值。
• 使用HTML的<progress>元素显示上传进度，并显示百分比。

四、总结

通过以上步骤，我们可以在Vue中实现分片上传并实时获取上传进度。主要方法包括：

1. 使用Axios拦截器获取上传进度。
2. 通过分片计算总进度。
3. 实时更新进度条。

这些方法结合起来，可以确保我们在文件上传过程中实时跟踪进度，并为用户提供良好的体验。

建议在实际应用中，根据文件大小和网络状况调整分片大小，以确保上传过程的稳定性和效率。同时，可以考虑在上传过程中添加错误处理和重试机制，以应对可能的网络问题。

相关问答FAQs：

1. 如何在Vue中实现分片上传？
分片上传是将大文件分成小块进行上传，可以提高上传速度和稳定性。在Vue中可以使用axios库来实现分片上传。首先，将文件分成多个块，然后逐个上传这些块，最后在服务器端将这些块合并成完整的文件。

2. 如何获取分片上传的进度？
在Vue中，可以通过监听xhr.upload对象的progress事件来获取分片上传的进度。xhr.upload对象是XMLHttpRequest对象的一个属性，用于获取上传的进度信息。在progress事件的回调函数中，可以获取到已上传的字节数和总字节数，从而计算上传进度。

3. 如何显示分片上传的进度？
可以在Vue中使用进度条来显示分片上传的进度。在模板中使用一个进度条组件，并将上传进度作为进度条的值进行绑定。在监听到progress事件时，更新上传进度的值，进而更新进度条的显示。可以使用Element UI或者其他UI库中的进度条组件来实现。

下面是一个示例代码，演示如何在Vue中实现分片上传并获取上传进度：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <el-progress :percentage="uploadProgress" />
    <button @click="startUpload">开始上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      uploadProgress: 0,
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    startUpload() {
      const chunkSize = 1024 * 1024; // 每个分片的大小
      const totalChunks = Math.ceil(this.file.size / chunkSize); // 总分片数
      let uploadedChunks = 0; // 已上传的分片数

      // 分割文件
      const chunks = [];
      for (let i = 0; i < totalChunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(start + chunkSize, this.file.size);
        const chunk = this.file.slice(start, end);
        chunks.push(chunk);
      }

      // 上传分片
      chunks.forEach((chunk, index) => {
        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('chunkIndex', index);
        formData.append('totalChunks', totalChunks);

        axios.post('/upload', formData, {
          onUploadProgress: (progressEvent) => {
            if (progressEvent.lengthComputable) {
              const loaded = progressEvent.loaded + uploadedChunks * chunkSize;
              const total = this.file.size;
              this.uploadProgress = Math.round((loaded / total) * 100);
            }
          },
        }).then(() => {
          uploadedChunks++;
          if (uploadedChunks === totalChunks) {
            // 所有分片上传完成
            console.log('上传完成');
          }
        }).catch((error) => {
          console.error('上传失败', error);
        });
      });
    },
  },
};
</script>

通过以上代码，可以实现在Vue中进行分片上传，并实时获取上传进度，并用进度条显示出来。