JavaScript教程：实现可恢复的文件上传功能-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00638/article/details/148574875

JavaScript教程：实现可恢复的文件上传功能

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

引言

在现代Web应用中，大文件上传是一个常见需求。但网络环境不稳定时，如何实现断点续传功能呢？本文将深入探讨如何使用JavaScript实现可恢复的文件上传功能。

基础文件上传的问题

使用fetch API可以轻松实现基础文件上传：

let formData = new FormData();
formData.append('file', file);
fetch('/upload', {
  method: 'POST',
  body: formData
});

但这种简单方法存在明显缺陷：

无法跟踪上传进度
网络中断后需要重新上传整个文件
缺乏上传状态管理机制

解决方案架构

要实现可靠的可恢复上传，我们需要以下关键组件：

文件唯一标识 - 识别同一文件的不同上传尝试
上传进度跟踪 - 监控上传状态
断点续传机制 - 从断点恢复上传
服务器端协调 - 验证和存储部分上传的文件

实现细节

1. 生成文件唯一标识

function generateFileId(file) {
  return `${file.name}-${file.size}-${file.lastModified}`;
}

这个ID由文件名、大小和最后修改时间组成，确保：

相同文件多次上传使用相同ID
文件内容变化后生成新ID
避免服务器端命名冲突

2. 查询上传状态

在开始上传前，先查询服务器已接收的字节数：

async function getUploadedBytes(fileId) {
  let response = await fetch('/upload-status', {
    headers: { 'X-File-Id': fileId }
  });
  
  if(response.ok) {
    return parseInt(await response.text());
  } else {
    return 0;
  }
}

服务器应维护一个映射表，记录每个文件ID对应的已接收字节数。

3. 分块上传实现

使用XMLHttpRequest实现可监控的分块上传：

function uploadFile(file, fileId, startByte = 0) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    
    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('X-File-Id', fileId);
    xhr.setRequestHeader('X-Start-Byte', startByte);
    
    xhr.upload.onprogress = (e) => {
      let percent = Math.round((startByte + e.loaded) / (startByte + e.total) * 100);
      updateProgressBar(percent);
    };
    
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new Error('Upload failed'));
    
    xhr.send(file.slice(startByte));
  });
}

关键点：

使用slice()方法从指定字节开始上传
通过自定义HTTP头传递元数据
实时更新上传进度条

4. 完整上传流程

整合上述组件：

async function resumeUpload(file) {
  const fileId = generateFileId(file);
  const startByte = await getUploadedBytes(fileId);
  
  try {
    await uploadFile(file, fileId, startByte);
    console.log('Upload completed');
  } catch(error) {
    console.error('Upload error:', error);
    // 可以实现自动重试逻辑
  }
}