• Html + Express 实现大文件分片上传、断点续传、秒传

    在日常的网页开发中，文件上传是一项常见操作。通过文件上传技术，用户可以将本地文件方便地传输到Web服务器上。这种功能在许多场景下都是必不可少的，比如上传文件到网盘或上传用户头像等。

    然而，当需要上传大型文件时，可能会遇到以下问题：

    1. 长时间上传：由于文件大小较大，上传过程可能会耗费较长时间。

    2. 上传中断重新上传：如果在上传过程中出现意外情况导致上传中断，用户需要重新开始整个上传过程，这会增加用户的不便。

    3. 服务端限制：通常，服务端会对上传的文件大小进行限制，这可能导致无法上传大型文件。

    为了解决这些问题，可以采用分片上传的方式：

    分片上传即将大文件分割成小块，然后分块上传到服务器。通过分片上传，可以实现以下优势：

    快速上传：由于每个小块的大小相对较小，上传时间大大缩短。

    断点续传：如果上传过程中出现中断，只需重新上传中断的部分，而不需要重新上传整个文件，提高了用户体验。

    避免大小限制：分片上传可以避免由于文件大小限制而无法上传大文件的问题。

    通过采用分片上传技术，可以提升用户体验，加快大文件上传速度，并确保上传过程的稳定性和可靠性。

    原理：


    分片上传的概念类似于将一个大文件分割成多个小块，然后分别上传这些小块到服务器上。
    首先，将待上传的大文件划分为固定大小的小块，比如每块大小为1MB。然后逐个上传这些小块到服务器。在上传过程中，可以同时处理多个小块的上传，也可以按顺序逐一上传小块。每个小块上传完成后，服务器会妥善保存这些小块，并记录它们的顺序和位置信息。
    当所有小块都上传完成后，服务器会按照预先记录的顺序和位置信息，将这些小块组合成完整的大文件。最终，整个大文件就成功地被分片上传并合并完成了。这种分片上传的方式能够有效地提升大文件上传的效率和稳定性，确保文件上传过程更加可靠和高效。

    前端代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    9.     <script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js">script>
    10.     <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js">script>
    11. head>
    12.  
    13. <body>
    14.     <input type="file" />
    15.     <script>
    16.         const CHUNK_SIZE = 1024 * 1024
    17.         let hashName = ''
    18.         let fileName = ''
    19.  
    20.         $('input').change(async (e) => {
    21.             const file = e.target.files[0]
    22.             const chunks = shardingChunks(file) // 分片
    23.             fileName = file.name
    24.             hashName = await shardingHash(file) // 获取文件hash值
    25.  
    26.             const { data: { existFile, existChunks } } = await axios.post('http://localhost:3000/uploader/verify', { fileHash: hashName, fileName });
    27.             if (existFile) return; // 如果该hash值 && file.name 存在说明该文件已经在服务器上了
    28.             uploader(chunks, existChunks)
    29.         })
    30.  
    31.         //  分片
    32.         const shardingChunks = (file) => {
    33.             let start = 0
    34.             const chunks = []
    35.             while (start < file.size) {
    36.                 chunks.push(file.slice(start, start + CHUNK_SIZE))
    37.                 start += CHUNK_SIZE
    38.             }
    39.             return chunks
    40.         }
    41.  
    42.         // 获取文件hash值
    43.         const shardingHash = (file) => {
    44.             return new Promise((resolve) => {
    45.                 const fileReader = new FileReader()
    46.                 fileReader.readAsArrayBuffer(file)
    47.                 fileReader.onload = (e) => {
    48.                     const spark = new SparkMD5.ArrayBuffer()
    49.                     spark.append(e.target.result)
    50.                     resolve(spark.end())
    51.                 }
    52.             })
    53.         }
    54.  
    55.         // 分片上传
    56.         const uploader = async (chunks, existChunks) => {
    57.             const chunksArr = chunks.map((chunk, index) => ({
    58.                 fileHash: hashName,
    59.                 chunkHash: hashName + '-' + index,
    60.                 chunk
    61.             }))
    62.             const formDatas = chunksArr.map(item => {
    63.                 const formData = new FormData();
    64.                 formData.append("fileHash", item.fileHash);
    65.                 formData.append("chunkHash", item.chunkHash);
    66.                 formData.append("chunk", item.chunk);
    67.                 return formData;
    68.             })
    69.             let flagArr = []
    70.             formDatas.forEach(async (item) => {
    71.                 const res = await axios.post('http://localhost:3000/uploader/upload', item, {
    72.                     headers: {
    73.                         'Content-Type': 'multipart/form-data'
    74.                     }
    75.                 })
    76.                 flagArr.push(res.data.success)
    77.                 if (flagArr.length == formDatas.length && flagArr.every(item => item == true)) {
    78.                     mergeFile() // 合并文件
    79.                     flagArr = []
    80.                 }
    81.             })
    82.         }
    83.  
    84.         const mergeFile = async () => {
    85.             const res = await axios.post('http://localhost:3000/uploader/merge',
    86.                 {
    87.                     fileHash: hashName,
    88.                     fileName: fileName
    89.                 })
    90.             if (res.data.success) return alert('上传成功')
    91.         }
    92.     script>
    93. body>
    94.  
    95. html>

    后端代码（Node）

    1. const express = require("express");
    2. const cors = require("cors");
    3. const bodyParser = require("body-parser");
    4. const fse = require("fs-extra");
    5. const path = require("path");
    6. const multipart = require("connect-multiparty");
    7. const multipartMiddleware = multipart();
    8.  
    9. const app = express();
    10.  
    11. app.use(cors());
    12. app.use(bodyParser.json());
    13.  
    14. // 所有上传的文件存放在该目录下
    15. const UPLOADS_DIR = path.resolve("uploads");
    16.  
    17. /**
    18.  * 上传
    19.  */
    20. app.post("/upload", multipartMiddleware, (req, res) => {
    21.   const { fileHash, chunkHash } = req.body;
    22.  
    23.   // 如果临时文件夹(用于保存分片)不存在，则创建
    24.   const chunkDir = path.resolve(UPLOADS_DIR, fileHash);
    25.   if (!fse.existsSync(chunkDir)) {
    26.     fse.mkdirSync(chunkDir);
    27.   }
    28.  
    29.   // 如果临时文件夹里不存在该分片，则将用户上传的分片移到临时文件夹里
    30.   const chunkPath = path.resolve(chunkDir, chunkHash);
    31.   if (!fse.existsSync(chunkPath)) {
    32.     fse.moveSync(req.files.chunk.path, chunkPath);
    33.   }
    34.  
    35.   res.send({
    36.     success: true,
    37.     msg: "上传成功",
    38.   });
    39. });
    40.  
    41. /**
    42.  * 合并
    43.  */
    44. app.post("/merge", async (req, res) => {
    45.   const { fileHash, fileName } = req.body;
    46.  
    47.   // 最终合并的文件路径
    48.   const filePath = path.resolve(UPLOADS_DIR, fileHash + path.extname(fileName));
    49.   // 临时文件夹路径
    50.   const chunkDir = path.resolve(UPLOADS_DIR, fileHash);
    51.  
    52.   // 读取临时文件夹，获取该文件夹下“所有文件（分片）名称”的数组对象
    53.   const chunkPaths = fse.readdirSync(chunkDir);
    54.  
    55.   // 读取临时文件夹获得的文件（分片）名称数组可能乱序，需要重新排序
    56.   chunkPaths.sort((a, b) => a.split("-")[1] - b.split("-")[1]);
    57.  
    58.   // 遍历文件（分片）数组，将分片追加到文件中
    59.   const pool = chunkPaths.map(
    60.     (chunkName) =>
    61.       new Promise((resolve) => {
    62.         const chunkPath = path.resolve(chunkDir, chunkName);
    63.         // 将分片追加到文件中
    64.         fse.appendFileSync(filePath, fse.readFileSync(chunkPath));
    65.         // 删除分片
    66.         fse.unlinkSync(chunkPath);
    67.         resolve();
    68.       })
    69.   );
    70.   await Promise.all(pool);
    71.   // 等待所有分片追加到文件后，删除临时文件夹
    72.   fse.removeSync(chunkDir);
    73.  
    74.   res.send({
    75.     success: true,
    76.     msg: "合并成功",
    77.   });
    78. });
    79.  
    80. /**
    81.  * 校验
    82.  */
    83. app.post("/verify", (req, res) => {
    84.   const { fileHash, fileName } = req.body;
    85.  
    86.   // 判断服务器上是否存在该hash值的文件
    87.   const filePath = path.resolve(UPLOADS_DIR, fileHash + path.extname(fileName));
    88.   const existFile = fse.existsSync(filePath);
    89.  
    90.   // 获取已经上传到服务器的文件分片
    91.   const chunkDir = path.resolve(UPLOADS_DIR, fileHash);
    92.   const existChunks = [];
    93.   if (fse.existsSync(chunkDir)) {
    94.     existChunks.push(...fse.readdirSync(chunkDir));
    95.   }
    96.  
    97.   res.send({
    98.     success: true,
    99.     msg: "校验文件",
    100.     data: {
    101.       existFile,
    102.       existChunks,
    103.     },
    104.   });
    105. });
    106.  
    107. const server = app.listen(3000, () => {
    108.   console.log(`Example app listening on port ${server.address().port}`);
    109. });

    效果图

  • 相关阅读:
    【方向盘】认为：开发者已无理由再用Java EE
    Lecture 11 Deadlocks （死锁）
    怎样在应用中实现自助报表功能？
    Bootstrap的CSS类积累学习
    Opencv | 边缘检测 & 轮廓信息
    PyTorch多GPU训练时同步梯度是mean还是sum?
    Pointnet/Pointnet++点云数据集处理并训练
    js节流和防抖
    【第2章 Node.js基础】2.1 JavaScript基本语法
    JMeter 调试取样器（Debug Sampler）简介
  • 原文地址：https://blog.csdn.net/m0_71349739/article/details/138715142