大文件上传优化（切片、断点续传、秒传）

大文件上传

前景提要

在工作中，经常会遇到上传文件的功能，但是当文件体积大时，如果使用把该文件直接在一个请求体中提交，会出现一些问题，以nginx为例：

其默认允许1MB以内的文件
超过1MB的文件，需要设置client_max_body_size放开体积限制

但是这样会存在一个问题，就是如果上传的文件体积很大，就会出现一些问题，最明显的问题是：

服务器的存储和网络带宽压力都会非常大

当服务器、产品、用户忍不了时，就需要对大文件上传进行优化。

1、大文件切片上传

逻辑梗概

将大文件分割成多个文件块
逐个上传文件块
服务端将文件块顺序合并成完整文件

优势分析：

减轻服务器压力：如果一次性上传大文件，服务器的存储和网络带宽压力都会非常大，而通过切片，可以将这些压力分散到多个小文件中，减轻服务器的压力。
断点续传、错误重试：因为大文件被肢解了，如果因为一些原因中断、错误了，已经上传的部分就不用再重新上传了，只需要把后续的传上就好了。

前端部分

1.1 切文件（前端）

1.2 判定切片是否完成上传完成（前端）

客户端记录切片的上传状态，只需要上传未成功的切片

1.3 断点、错误续传（前端）

客户端上传文件时，记录已上传的切片位置
下次上传时，根据记录的位置，继续上传

后端部分

1.1 收切片、存切片

将相关切片保存在目标文件夹

1.2 合并切片

服务端根据切片的顺序，将切片合并成完整文件

1.3 文件是否存在校验

服务端根据文件Hash值、文件名，校验该文件是否已经上传

代码实现

1、搭建基础项目

服务器（基于express）

js 复制代码

const express = require('express')
const app = express()
app.listen(3000, () => {
    console.log('服务已运行：http://localhost:3000');
})

前端

基础页面

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            display: block;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <input type="file" id="file">
    <input type="button" id="upload" value="上传">
    <input type="button" id="continue" value="继续上传">
</body>
</html>

引入资源

html 复制代码

<script type="module" src="./spark-md5.js"></script>
<script type="module" src="./operate.js"></script>

operate.js

js 复制代码

// 获取文件域
const fileEle = document.querySelector("#file");
const uploadButton = document.querySelector("#upload");
const continueButton = document.querySelector("#continue");
uploadButton.addEventListener("click", async () => {
    console.log("点击了上传按钮")
})
continueButton.addEventListener('click', async () => {
    console.log("点击了继续上传按钮")
})

3、静态资源托管（server）

js 复制代码

app.use(express.static('static'))

4、上传接口

搭建上传接口（server）

使用body-parser中间价解析请求体

js 复制代码

// 导入中间件
const bodyParser = require('body-parser')
// 使用中间件
// 处理URL编码格式的数据
app.use(bodyParser.urlencoded({ extended: false })); 
// 处理JSON格式的数据
app.use(bodyParser.json());

上传接口

js 复制代码

app.post('/upload', (req, res) => {
    res.send({
        msg: '上传成功',
        success: true
    })
})

测试接口（前端）

js 复制代码

// 单个文件上传
const uploadHandler = async (file) => {
    fetch('http://localhost:3000/upload', {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            fileName: '大文件',
        }),
    })
}
uploadButton.addEventListener("click", async (e) => {
    uploadHandler()
})

5、文件上传接口存储文件（server）

使用multer中间件处理上传文件

设置uploadFiles文件夹为文件存储路径

js 复制代码

const multer = require('multer')
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploadFiles');
    },
});
const upload = multer({
    storage
})

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

测试

js 复制代码

// 单个文件上传
const uploadHandler = async (file) => {
    let fd = new FormData();
    fd.append('file', file);
    fetch('http://localhost:3000/upload', {
        method: "POST",
        body: fd
    })
}
uploadButton.addEventListener("click", async () => {
    let file = fileEle.files[0];
    uploadHandler(file)
})

6、文件切片

注意

假设切片大小为1M 保存切片顺序（为了合成大文件时正确性）上传状态（为了断点续传、前端显示进度条）

js 复制代码

// 使用单独常量保存预设切片大小 1MB
const chunkSize = 1024 * 1024 * 1; 
// 文件切片
const createChunks = () => {
    // 接受一个文件对象，要把这个文件对象切片，返回一个切片数组
    const chunks = [];
    // 文件大小.slice(开始位置,结束位置)
    let start = 0;
    let index = 0;
    while (start < file.size) {
        let curChunk = file.slice(start, start + chunkSize);
        chunks.push({
            file: curChunk,
            uploaded: false,
            chunkIndex: index,
        });
        index++;
        start += chunkSize;
    }
    return chunks;
}

测试文件切片函数

js 复制代码

// 存储当前文件所有切片
let chunks = [];
uploadButton.addEventListener("click", async () => {
    let file = fileEle.files[0];
    chunks = createChunks(file);
    console.log(chunks);
})

注意：将来要把这些切片全部都上传到服务器，并且最后需要把这些切片合并成一个文件，且要做出文件秒传功能，需要保留当前文件的hash值和文件名，以辨别文件和合并文件。

在页面中引入spark-md5.js

html 复制代码

<script type="module" src="./spark-md5.js"></script>

获取文件Hash值

js 复制代码

const getHash = (file) => {
    return new Promise((resolve) => {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = function (e) {
            let fileMd5 = SparkMD5.ArrayBuffer.hash(e.target.result);
            resolve(fileMd5);
        }
    });
}

把文件的hash值保存在切片信息中

js 复制代码

// 文件hash值
let fileHash = "";
// 文件名
let fileName = "";
// 创建切片数组
const createChunks = (file) => {
    // 接受一个文件对象，要把这个文件对象切片，返回一个切片数组
    const chunks = [];
    // 文件大小.slice(开始位置,结束位置)
    let start = 0;
    let index = 0;
    while (start < file.size) {
        let curChunk = file.slice(start, start + chunkSize);
        chunks.push({
            file: curChunk,
            uploaded: false,
            fileHash: fileHash,
            chunkIndex: index,
        });
        index++;
        start += chunkSize;
    }
    return chunks;
}
// 上传执行函数
const uploadFile = async(file) => {
    // 设置文件名
    fileName = file.name;
    // 获取文件hash值
    fileHash = await getHash(file);
    chunks = createChunks(file);
    console.log(chunks);
}

7、上传接口修改

批量上传切片

js 复制代码

// 单个文件上传
const uploadHandler = (chunk) => {
    return new Promise(async (resolve, reject) => {
        try {
            let fd = new FormData();
            fd.append('file', chunk.file);
            fd.append('fileHash', chunk.fileHash);
            fd.append('chunkIndex', chunk.chunkIndex);
            let result = await fetch('http://localhost:3000/upload', {
                method: 'POST',
                body: fd
            }).then(res => res.json());
            chunk.uploaded = true;
            resolve(result)
        } catch (err) {
            reject(err)
        }
    })
}
// 批量上传切片
const uploadChunks = (chunks, maxRequest = 6) => {
    return new Promise((resolve, reject) => {
        if (chunks.length == 0) {
            resolve([]);
        }
        let requestSliceArr = []
        let start = 0;
        while (start < chunks.length) {
            requestSliceArr.push(chunks.slice(start, start + maxRequest))
            start += maxRequest;
        }
        let index = 0;
        let requestReaults = [];
        let requestErrReaults = [];

        const request = async () => {
            if (index > requestSliceArr.length - 1) {
                resolve(requestReaults)
                return;
            }
            let sliceChunks = requestSliceArr[index];
            Promise.all(
                sliceChunks.map(chunk => uploadHandler(chunk))
            ).then((res) => {
                requestReaults.push(...(Array.isArray(res) ? res : []))
                index++;
                request()
            }).catch((err) => {
                requestErrReaults.push(...(Array.isArray(err) ? err : []))
                reject(requestErrReaults)
            })
        }
        request()
    })
}

目标功能：使用一个文件Hash值同名的文件夹保存所有切片

js 复制代码

const path = require('path')
const fse = require('fs-extra')
app.post('/upload', upload.single('file'), (req, res) => {
    const { fileHash, chunkIndex } = req.body;
    // 上传文件临时目录文件夹
    let tempFileDir = path.resolve('uploadFiles', fileHash);
    let currentChunkPath = path.resolve(req.file.path);
    // 如果当前文件的临时文件夹不存在，则创建该文件夹
    if (!fse.pathExistsSync(tempFileDir)) {
        fse.mkdirSync(tempFileDir)
    }
    // 如果无临时文件夹或不存在该切片，则将用户上传的切片移到临时文件夹里
    // 如果有临时文件夹并存在该切片，则删除用户上传的切片（因为用不到了）
    const tempChunkPath = path.resolve(tempFileDir, chunkIndex);
    if (!fse.existsSync(tempChunkPath)) {
        fse.moveSync(currentChunkPath, tempChunkPath)
    } else {
        fse.removeSync(currentChunkPath)
    }
    res.send({
        msg: '上传成功',
        success: true
    })
})

8、合并文件

编写合并接口（server）

在此接口被请求时，根据文件Hash值、文件名，将所有切片合并成一个完整的文件

js 复制代码

app.get('/merge', async (req, res) => {
    const { fileHash, fileName } = req.query;
    res.send({
        msg: `Hash：${fileHash},文件名：${fileName}`,
        success: true
    });
})

请求合并接口（前端）

在切片上传完成后，调用合并接口

js 复制代码

合并接口逻辑

1、获取所有切片路径数组

js 复制代码

app.get('/merge', async (req, res) => {
    const { fileHash, fileName } = req.query;
    // 最终合并的文件路径
    const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName));
    // 临时文件夹路径
    let tempFileDir = path.resolve('uploadFiles', fileHash);
    // 读取临时文件夹，获取所有切片
    const chunkPaths = fse.readdirSync(tempFileDir);
    console.log('chunkPaths：', chunkPaths);
    res.send({
        msg: "合并成功",
        success: true
    });
})

合并接口逻辑

2、遍历获取所有切片路径数组，根据路径找到切片，合并成一个文件，删除原有文件夹

js 复制代码

app.get('/merge', async (req, res) => {
    const { fileHash, fileName } = req.query;
    // 最终合并的文件路径
    const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName));
    // 临时文件夹路径
    let tempFileDir = path.resolve('uploadFiles', fileHash);

    // 读取临时文件夹，获取所有切片
    const chunkPaths = fse.readdirSync(tempFileDir);

    console.log('chunkPaths：', chunkPaths);

    // 将切片追加到文件中
    let mergeTasks = [];
    for (let index = 0; index < chunkPaths.length; index++) {
        mergeTasks.push(new Promise((resolve) => {
            // 当前遍历的切片路径
            const chunkPath = path.resolve(tempFileDir, index + '');
            // 将当前遍历的切片切片追加到文件中
            fse.appendFileSync(filePath, fse.readFileSync(chunkPath));
            // 删除当前遍历的切片
            fse.unlinkSync(chunkPath);
            resolve();
        }))
    }
    await Promise.all(mergeTasks);
    // 等待所有切片追加到文件后，删除临时文件夹
    fse.removeSync(tempFileDir);
    res.send({
        msg: "合并成功",
        success: true
    });
})

10、其他

提取为公共方法

编写 uploadFile.js 文件，暴露 uploadFile方法

断点续传

此功能对用户来说是黑盒，用户只需要调用 uploadFile方法 重新上传同一文件即可

2、大文件秒传

逻辑梗概

客户端上传文件时，先提交文件的哈希值，
服务端根据哈希值查询文件是否已经上传，如果已上传，则直接返回已上传状态
客户端收到已上传状态后，直接跳过上传过程

优势分析：

提高上传效率：秒传可以提高上传效率，因为文件已经在上传过程中被上传过了，直接返回已上传状态，省要再次上传，提高效率。

代码实现

校验接口，校验是否已经存在目标文件

逻辑：根据文件Hash值和文件名组成 "文件Hash.文件扩展名" ，以保证文件名唯一

js 复制代码

app.get('/verify', (req, res) => {
    const { fileHash, fileName } = req.query;
    const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName));
    const exitFile = fse.pathExistsSync(filePath);
    res.send({
        exitFile
    })
})

校验函数

js 复制代码

// 校验文件、文件分片是否存在
const verify = (fileHash, fileName) => {
    return fetch(`http://localhost:3000/verify?fileHash=${fileHash}&fileName=${fileName}`, {
        method: "GET",
    }).then(res => res.json());
};

// 文件上传
const uploadFile = async (file) => {
    // 设置文件名
    fileName = file.name;
    // 获取文件hash值
    fileHash = await getHash(file);
    // 校验是否已经上传该文件
    let { exitFile } = await verify(fileHash, fileName);
    if (exitFile) {
        return {
            mag: "文件已上传",
            success: true
        }
    }
    // 获取切片
    chunks = createChunks(file);
    try {
        await uploadChunks(chunks.filter(chunk => !chunk.uploaded))
        await mergeRequest(fileHash, fileName)
    } catch (err) {
        return {
            mag: "文件上传错误",
            success: false
        }
    }
}

资源