当前位置：首页 > news >正文

使用axios 封装大文件上传，支持断点续传的功能

news 2025/8/26 10:40:54

使用 Axios 实现断点续传、重试、暂停、开始和上传进度功能

简介

在许多应用程序中，我们经常需要上传大文件。但是，由于网络连接不稳定或其他原因，上传过程可能会中断。为了解决这个问题，我们可以使用断点续传功能。断点续传允许我们在上传中断后从中断处继续上传文件，而无需重新上传整个文件。

除了断点续传，我们还可以使用重试、暂停和开始功能来更好地控制上传过程。重试功能允许我们在上传失败时自动重试上传。暂停功能允许我们暂停正在进行的上传。开始功能允许我们开始新的上传。

此外，我们还可以使用上传进度功能来实时跟踪上传进度。这对于大文件上传非常有用，因为它可以让我们知道上传的进展情况。

实现

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

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

npm install axios

安装完成后，我们就可以在我们的代码中使用 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) => {// 获取文件 IDconst 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();
});