【全栈】大文件切片上传实现进度条，关闭浏览器再次打开继续上传（不需要再次选择文件）

原创

已于 2025-04-09 09:00:23 修改 · 1.4k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#状态模式 #前端 #javascript #html5 #express #后端

于 2025-04-08 17:39:48 首次发布

项目场景：

客户对上传文件功能提出了一个需求：关闭浏览器再次打开系统时，能够继续上传上次没有上传完的文件，而且希望不需要选择原文件了。

问题描述

之前项目的切片断点续传是要重新选择文件才能继续上传，本次的需求就无法满足，于是通过使用 IndexedDB 的来记录文件信息，以便能够不需要重新选择文件。

一，存储方式

文件存在用户本地设备
1. 源文件始终存储在用户的本地设备（如电脑、手机）中，前端通过浏览器的 File API 直接读取文件内容。
2. 无需将文件存储到服务器或浏览器缓存，仅上传分块数据。

前端状态存储

文件元数据（如文件名、总大小）和上传状态（已上传块索引）存储在浏览器的 IndexedDB 中。

示例存储结构：

{
       
       
  "uploadId": "unique-task-id",
  "fileName": "video.mp4", 
  "fileSize": 10485760,
  "uploadedChunks": [0, 1, 2]
}

二，恢复上传的实现逻辑

页面加载时自动检测
1. 读取本地存储的 uploadId 和 uploadedChunks，结合文件元数据，计算未上传的块范围。
2. 无需用户重新选择文件，直接通过 File API 读取本地文件的剩余块。
分块上传机制
1. 前端使用 File.slice(start, end) 动态读取文件的未上传部分。
```
const chunk = file.slice(start,  end); // 动态读取文件块 
```
2. 服务端按 uploadId 存储临时块文件（如 uploads/{uploadId}/{blockNumber}.part），合并时生成完整文件。

三，关键优势

无需用户干预
- 用户关闭浏览器后，再次打开页面时自动恢复上传，无需重新选择文件。
安全与隐私
- 源文件仅存在于用户本地设备，未上传的块数据不会泄露到服务器。
高效性
- 仅上传未完成的块，减少网络流量和服务器负载。

解决方案：

项目代码无法拿出来，实现了一个最小可用版本。需要注意的是如果用户更换了浏览器或者电脑就无法继续上传了

先启动node服务，在terminal中输入以下代码，控制台出现文件上传服务已启动: http://localhost:3001就是启动成功了。

> cd server
> node uploadServer.js

使用浏览器打开index.html，即可查看效果。

项目依赖如下（package.json）：

{
   
   
  "dependencies": {
   
   
    "axios": "^1.8.4",
    "cors": "^2.8.5",
    "express": "^5.1.0",
    "fs-extra": "^11.3.0",
    "multer": "^1.4.5-lts.2",
    "spark-md5": "^3.0.2"
  }
}

目录结构如下：

在这里插入图片描述

源码如下：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大文件上传</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.8.4/axios.min.js"></script>
    <style>
      .container {
     
     
        margin: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        max-width: 500px;
      }
      .progress-container {
     
     
        margin-top: 10px;
      }
      button:disabled {
     
     
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <input type="file" id="fileInput" />
      <button id="uploadBtn">上传</button>
      <div
        class="progress-container"
        id="progressContainer"
        style="display: none"
      >
        <progress id="progressBar" value="0" max="100"></progress>
        <span id="progressText">0%</span>
      </div>
    </div>
    <script src="src/upload.js"></script>
  </body>
</html>

upload.js

// 配置常量
const CONFIG = {
   
   
  CHUNK_SIZE: 1 * 1024 * 1024, // 1MB
  API_BASE_URL: "http://localhost:3001",
  DB_NAME: "FileUploadDB",
  STORE_NAME: "files",
  RETRY_DELAY: 1000, // 1秒
  MAX_RETRIES: 3,
};

// DOM 元素
const DOM = {
   
   
  fileInput: document.getElementById("fileInput"),
  uploadBtn: document.getElementById("uploadBtn"),
  progressContainer: document.getElementById("progressContainer"),
  progressBar: document.getElementById("progressBar"),
  progressText: document.getElementById("progressText"),
};

// 状态管理
const state = {
   
   
  file: null,
  uploadedChunks: JSON.parse(localStorage.getItem("uploadedChunks") || "[]"),
  fileHash: localStorage.getItem("fileHash") || "",
  chunks: [],
  fileInfo: JSON.parse(localStorage.getItem("fileInfo") || "null"),
  db: null,
};

// IndexedDB 操作
const dbOperations = {
   
   
  async initDB() {
   
   
    return new Promise((resolve, reject) => {
   
   
      const request = indexedDB.open(CONFIG.DB_NAME, 1);

      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
   
   
        state.db = request.result;
        resolve(state.db);
      };

      request.onupgradeneeded = (event) => {
   
   
        const db = event.target.result;
        if (!db.objectStoreNames.contains(CONFIG.STORE_NAME)) {
   
   
          db.createObjectStore(CONFIG.STORE_NAME);
        }
      };
    });
  },

  async saveFile(file, hash) {
   
   
    return new Promise((resolve, reject) => {
   
   
      const transaction = state.db.transaction(
        [CONFIG.STORE_NAME],
        "readwrite"
      );
      const store = transaction.objectStore(CONFIG.STORE_NAME);
      const request = store.put(file, hash);

      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  },

  async getFile(hash) {
   
   
    return new Promise((resolve, reject) => {
   
   
      const transaction = state.d

最低0.47元/天解锁文章