安装依赖

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.all
    
        const 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'

初始化 multer

const 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)))//拼接video

      fs.unlinkSync(path.join(uploadDir,item)) 删除upload目录下所有的切片
        
    })
    

})



app.listen(3000,()=>{

    console.log('http://localhost:3000')
})