安装依赖

1.express 帮我们启动服务，并且提供接口

2.multer 读取文件，存储

3.cors 解决跨域

项目的目录结构：

前端代码：

<input type="file" /><script>const file = document.queryselector('input')// 分隔文件const chunksFun = (file,size=1024*1024*4){const chunks = []for(let i = 0 ; i < file.size, i+= size){chunks.push(file.slice(i,i+size))}return chunks }// 批量上传给后端的方法const uploadFiles = (chunks)=>{// 需要批量上传 promise.allconst list = []for(let i = 0; i<chunks.length;i++){const formData = new FormData()formData.append('index',i)formData.append('filename','xiezhen')formData.append('file',chunks[i]) // 写在最后面list.push(fetch('http://localhost:3000/upload',{method:'POST',body:formData}))}Promise.all(list).then(res=>{console.log('上传成功')//  通知后端进行合并fetch('http://localhost:3000/merge',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({fileName:'xiezhen'})})})}// 监听上传文件的方法file.addEventListener('change',(e=>{const file = e.target.files[0]const chunks = chunksFun(file) // 数组所有文件的切片}))</script>

后端的代码

import express from 'express'import multer from 'multer'import cors from 'cors'import fs from 'fs'import path from 'path'初始化 multerconst storage = multer.diskStorage({destination:function(req,file,cb){cb(null,'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.join())// 前端分片上传的数据app.post('/upload',upload.single('file'),(req,res)=>{  file字段需要和前端传递的一样console.log('ok') // 这里将前段时间上传文件存储到upload的目录下了})// 合并切片的方法app.post('/merge',(req,res)=>{const uploadDir = path.join(process.cwd(),'uploads')const dirs = fs.readdirSync(uploadDir) 获取upload下面所有的文件// 将文件进行排序dirs.sort((a,b)=>a.split('-')[0]-b.split('-')[0])console.log(dirs)const video = path.join(process.cwd(),'video',`${req.body}.fileName}.mp4`)dirs.forEach(item=>{fs.appendFileSync(video,fs.readFileSync(path.join(uploadDir,item)))//拼接videofs.unlinkSync(path.join(uploadDir,item)) 删除upload目录下所有的切片})})app.listen(3000,()=>{console.log('http://localhost:3000')
})