node实现大文件切片上传的方法

小灰灰学编程

于 2024-09-29 16:23:08 发布

阅读量354

点赞数 2

分类专栏： Node.js JavaScript 文章标签：前端 node.js 大文件切片上传分片上传

本文链接：https://blog.csdn.net/chen_ac/article/details/142637702

版权

JavaScript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Node.js

4 篇文章 0 订阅

订阅专栏

切片上传定义

文件切片上传，也称为分片上传，是一种处理大文件上传的有效方法。该方法通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件

背景与需求

在Web开发中，上传大文件时常常会遇到各种问题，如连接超时、网络中断等，这些都可能导致上传失败。为了提升大文件上传的效率和成功率，文件切片上传技术应运而生。通过将大文件分割成多个小切片进行上传，可以有效减少单次上传的数据量，降低上传失败的风险，并提高上传速度。

工作原理

前端将用户上传的文件按照设定大小进行切片，每一个切片都会发送一次切片请求，等所有的切片请求都完成之后，再执行一次切换合并的请求，将各个切片进行拼接存储。

可拓展

1、切片的顺序可能是乱序的，需要在发送切片请求之前，先按照特定的规则进行排序，特定规则可以是从自定义的切片文件名入手
2、前端可以对切片上传进行监听，当某个切片上传失败时，需要触发重试机制上传该切片，可以设置重试次数或者重试时间间隔

优点与应用场景

提升上传效率：通过并行上传多个切片，可以显著提高大文件的上传速度
降低上传失败风险：即使某个切片上传失败，也只需要重新上传该切片，而不需要重新上传整个文件
支持断点续传：结合前端记录的上传进度和状态信息，可以实现断点续传功能，即在网络中断后可以从上次中断的位置继续上传

效果

启动本地服务器

发送请求

切片数据

最终合并的数据

代码

<body></body>
  <input type="file" id="file">
</body>

<script>
  const file = document.getElementById('file');
  file.addEventListener('change', (event)=>{
    const fileInfo = event.target.files[0]; // 获取文件信息
    console.log(fileInfo, 'fileInfo')
    const chunks = chunkFun(fileInfo) // 获取切片数组
    uploadFile(chunks, fileInfo.name) // 上传切片
  })

  const chunkFun = (fileInfo, size = 1024 * 1024 * 4) => { // size-自定义切片大小，这里是4M
    const chunks = [];
    for(let i=0; i<fileInfo.size; i+=size){
      chunks.push(fileInfo.slice(i, i + size))
    }
    return chunks
  }

  const uploadFile = (chunks, fileName) =>{
    const List = [];
    for(let i=0; i<chunks.length; i++){
      const formData = new FormData();
      formData.append('index', i);
      formData.append('total', chunks.length);
      formData.append('fileName', 'cheney');
      formData.append('file', chunks[i]);
      // 将每一个分片的fetch存在List数组中
      List.push(fetch('http://127.0.0.1:8080/up', {
        method: 'POST',
        body: formData
      }))
    }

    // 通过promise.all 并发发送请求
    Promise.all(List).then(res=>{
      fetch('http://127.0.0.1:8080/merge', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          fileName: fileName
        })
      }).then(res=>{
        console.log(res)
      })
    })
  }
</script>

node.js

// import express from 'express'
// import multer from 'multer'
// import cors from 'cors'
// import fs from 'node:fs'
// import path from 'node:path'
const express = require('express');
const multer = require('multer');
const cors = require('cors');
const fs = require('fs');
const path = require('path');


const storage = multer.diskStorage({
  destination: (req, file, cb) => {
      cb(null, 'chunk/uploads/') // 分片存储目录
  },
  filename: (req, file, cb) => {
    cb(null, `${req.body.index}-${req.body.fileName}`) // 分片文件名
  }
})
const upload = multer({ storage })
const app = express()

app.use(cors())
app.use(express.json())

app.post('/up', upload.single('file'), (req, res) => {
  res.send('ok')
})

app.post('/merge', async (req, res) => {
  const uploadPath = './chunk/uploads'
  let files = fs.readdirSync(path.join(process.cwd(), uploadPath)) // 获取所有的分片数据
  files = files.sort((a, b) => a.split('-')[0] - b.split('-')[0]) // 将分片按照文件名进行排序
  const writePath = path.join(process.cwd(), uploadPath, `${req.body.fileName}`) // 生成新的文件路径
  files.forEach((item) => {
      fs.appendFileSync(writePath, fs.readFileSync(path.join(process.cwd(), uploadPath, item))) // 读取分片信息，追加到新文件路径尾部
      fs.unlinkSync(path.join(process.cwd(), uploadPath, item)) // 将读取过的分片进行删除
  })

  res.send('ok')
})

app.listen(8080, () => {
  console.log('Server is running on port 8080')
})