Large File Upload with Chunking, Instant Upload, and Resume Using React, Vue and NestJS

Uploading a large file in a single request can cause high memory usage and unstable network transmission, so the common solution is to split the file into small chunks, upload each chunk separately, and finally merge them on the server.

To enable instant upload (秒传) and breakpoint resume (断点续传), the client calculates an MD5 hash of the whole file; the hash is used to check whether the file or its chunks already exist on the server.

The demo project provides both Vue and React front‑ends and a NestJS back‑end, all runnable out of the box.

Frontend workflow:

Select a file, compute its MD5 hash with spark-md5 , and split it using file.slice .

Send the hash, file name, and chunk size to the back‑end to query the upload status.

Based on the response ( uploaded for instant upload, uploading for resume, or default not uploaded), decide whether to skip uploading, upload missing chunks, or start a fresh upload.

After all chunks are uploaded, notify the back‑end to merge them into the complete file.

Backend implementation (NestJS + TypeScript):

Uses Multer middleware to handle multipart/form-data uploads.

Checks the uploads directory for existing complete files or chunk files to determine the response status.

Creates a directory for the incoming file, saves each chunk, and finally merges the chunks when instructed.

Relies on Node.js fs module for file system operations.

The article also suggests optimization points such as performing chunking in a Web Worker to keep the main thread responsive, storing unfinished chunks in IndexedDB for recovery after a browser crash, and using WebSocket for real‑time communication.

Overall, the described approach demonstrates a complete end‑to‑end solution for large file uploads with instant‑upload detection, breakpoint resume, and server‑side merging.