使用axios 实现断点续传的功能

我们可以使用 Axios 库来轻松实现断点续传、重试、暂停、开始和上传进度功能。Axios 是一个流行的 JavaScript 库，它可以帮助我们轻松地发送 HTTP 请求。

首先，我们需要安装 Axios 库。我们可以使用以下命令来安装 Axios
 

npm install axios

以下是如何使用 Axios 实现断点续传、重试、暂停、开始和上传进度功能的示例代码：
 

import axios from 'axios';

// 断点续传
const resumeUpload = (file, chunkSize, fileId, endpoint) => {
  // 获取已上传的字节数
  const uploadedBytes = file.slice(0, chunkSize).byteLength;

  // 创建一个新的 FormData 对象
  const formData = new FormData();

  // 将文件块添加到 FormData 对象中
  formData.append('file', file.slice(uploadedBytes));

  // 将文件 ID 和已上传的字节数添加到 FormData 对象中
  formData.append('fileId', fileId);
  formData.append('uploadedBytes', uploadedBytes);

  // 发送请求以继续上传文件
  return axios.post(endpoint, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });
};

// 重试
const retryUpload = (file, chunkSize, fileId, endpoint) => {
  // 获取已上传的字节数
  const uploadedBytes = file.slice(0, chunkSize).byteLength;

  // 创建一个新的 FormData 对象
  const formData = new FormData();

  // 将文件块添加到 FormData 对象中
  formData.append('file', file.slice(uploadedBytes));

  // 将文件 ID 和已上传的字节数添加到 FormData 对象中
  formData.append('fileId', fileId);
  formData.append('uploadedBytes', uploadedBytes);

  // 发送请求以重试上传文件
  return axios.post(endpoint, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });
};

// 暂停
const pauseUpload = () => {
  // 取消正在进行的上传请求
  axios.cancel();
};

// 开始
const startUpload = (file, chunkSize, endpoint) => {
  // 创建一个新的 FormData 对象
  const formData = new FormData();

  // 将文件块添加到 FormData 对象中
  formData.append('file', file.slice(0, chunkSize));

  // 发送请求以开始上传文件
  return axios.post(endpoint, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });
};

// 上传进度
const uploadProgress = (progressEvent) => {
  // 计算上传进度
  const progress = (progressEvent.loaded / progressEvent.total) * 100;

  // 更新进度条
  document.getElementById('progress-bar').value = progress;
};

使用示例：

// 文件对象
const file = document.getElementById('file-input').files[0];

// 块大小（以字节为单位）
const chunkSize = 1024 * 1024; // 1MB

// 文件 ID（唯一标识符）
const fileId = '1234567890';

// 端点 URL
const endpoint = 'https://example.com/upload';

// 开始上传文件
startUpload(file, chunkSize, endpoint)
  .then((response) => {
    // 获取文件 ID
    const fileId = response.data.fileId;

    // 上传文件块
    for (let i = 1; i < Math.ceil(file.size / chunkSize); i++) {
      // 获取文件块
      const fileChunk = file.slice(i * chunkSize, (i + 1) * chunkSize);

      // 上传文件块
      resumeUpload(fileChunk, chunkSize, fileId, endpoint)
        .then((response) => {
          // 更新上传进度
          uploadProgress(response.data.progress);
        })
        .catch((error) => {
          // 重试上传文件块
          retryUpload(fileChunk, chunkSize, fileId, endpoint);
        });
    }
  })
  .catch((error) => {
    // 处理错误
    console.error(error);
  });

// 暂停上传文件
document.getElementById('pause-button').addEventListener('click', () => {
  pauseUpload();
});