Node中文件断点续传原理和方法总结

2022-04-16 16:17:13 来源：易采站长站作者：

原理介绍

这里先介绍一下文件上传的原理，帮助理清这个头绪。

普通上传

一般网站上都是普通上传的比较多，大多数都是上传一些用户的头像，用户的动态评论附带图片什么的，所以先来说一下这个的原理。

用户选择文件后，js检测文件大小是否超出限制和格式是否正确；检查后使用ajax提交请求，服务端也进行二次验证后储存到服务器；后端返回文件地址到前端，渲染页面数据；

大文件上传

用户选择文件后，js检测文件大小是否超出限制和格式是否正确；

根据文件大小，使用file.slice方法进行文件分割；

使用SparkMD5和FileReaderAPI生成文件唯一的md5值；

使用ajax提交请求，服务端收到后返回文件在服务器的信息；

如果存在这个md5值的文件夹，则返回文件夹里面上传了多少文件；不存在则新建一个这个md5值的文件夹，返回空内容；

前端收到信息后，根据返回信息作出判断；

如果返回的文件长度等于切片的总长度，则请求合并文件；如果返回的文件长度小于切片的总长度，则开始上传对应的切片文件，直至上传完最后一个切片再请求合并文件；

后端收到合并的请求后，对对应的md5值的文件夹里面的文件进行合并，返回文件地址；

前端收到文件地址后，渲染页面数据；

断点续传

这个的意思就是文件上传过程中，如果遇到不可抗力，比如网络中断，服务器异常，或者其他原因导致上传中断；

下次再次上传时候，服务端根据这个文件的md5值找出上传了多少，还剩下多少未上传，发送给客户端，客户端收到后继续对未上传的进行上传，上传完成后合并文件并返回地址。

这样就避免了文件重复上传，浪费服务器空间使用，节约服务器资源，而且速度比上传一个大文件更快，更高效。

方法总结

接下来根据上面的逻辑原理分析步骤，进行代码功能实现。

普通文件

本小节讲述普通文件的上传，包括前端部分和后端部分。

前端部分

html部分

先来建立个小房子

<div class="upload">        <h3>普通上传</h3>        <form>            <div class="upload-file">                <label for="file">请选择文件</label>                <input type="file" name="file" id="file" accept="image/*">            </div>            <div class="upload-progress">                当前进度：                <p>                    <span style="width: 0;" id="current"></span>                </p>            </div>            <div class="upload-link">                文件地址：<a id="links" href="javascript:void();" rel="external nofollow"  target="_blank">文件链接</a>            </div>        </form>    </div>    <div class="upload">        <h3>大文件上传</h3>        <form>            <div class="upload-file">                <label for="file">请选择文件</label>                <input type="file" name="file" id="big-file" accept="application/*">            </div>            <div class="upload-progress">                当前进度：                <p>                    <span style="width: 0;" id="big-current"></span>                </p>            </div>            <div class="upload-link">                文件地址：<a id="big-links" href="" target=" rel="external nofollow" _blank">文件链接</a>            </div>        </form>    </div>

引入axios和spark-md5两个js文件。

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>

css部分

来装饰一下这个房子。

body {    margin: 0;    font-size: 16px;    background: #f8f8f8;}h1,h2,h3,h4,h5,h6,p {    margin: 0;} /* * {    outline: 1px solid pink;} */ .upload {    box-sizing: border-box;    margin: 30px auto;    padding: 15px 20px;    width: 500px;    height: auto;    border-radius: 15px;    background: #fff;} .upload h3 {    font-size: 20px;    line-height: 2;    text-align: center;} .upload .upload-file {    position: relative;    margin: 30px auto;} .upload .upload-file label {    display: flex;    justify-content: center;    align-items: center;    width: 100%;    height: 150px;    border: 1px dashed #ccc;} .upload .upload-file input {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    opacity: 0;} .upload-progress {    display: flex;    align-items: center;} .upload-progress p {    position: relative;    display: inline-block;    flex: 1;    height: 15px;    border-radius: 10px;    background: #ccc;    overflow: hidden;} .upload-progress p span {    position: absolute;    left: 0;    top: 0;    width: 0;    height: 100%;    background: linear-gradient(to right bottom, rgb(163, 76, 76), rgb(231, 73, 52));    transition: all .4s;} .upload-link {    margin: 30px auto;} .upload-link a {    text-decoration: none;    color: rgb(6, 102, 192);} @media all and (max-width: 768px) {    .upload {        width: 300px;    }}

js部分

最后加上互动效果。

// 获取元素const file = document.querySelector('#file');let current = document.querySelector('#current');let links = document.querySelector('#links');let baseUrl = 'http://localhost:3000'; // 监听文件事件file.addEventListener('change', (e) => {    console.log(e.target.files);    let file = e.target.files[0];    if (file.type.indexOf('image') == -1) {        return alert('文件格式只能是图片！');    }    if ((file.size / 1000) > 100) {        return alert('文件不能大于100KB！');    }    links.href = '';    file.value = '';    this.upload(file);}, false); // 上传文件async function upload (file) {    let formData = new FormData();    formData.append('file', file);    let data = await axios({        url: baseUrl+'/upload',        method: 'post',        data: formData,        onUploadProgress: function(progressEvent) {            current.style.width = Math.round(progressEvent.loaded / progressEvent.total * 100) + '%';        }    });    if (data.data.code == 200) {        links.href = data.data.data.url;    } else {        alert('上传失败！')    }}

后端部分

打开上次的文件夹demo,先来下载安装一个处理文件的包formidable,然后开始处理上传的文件啦！

新建一个文件夹,别忘了在app.js引入新的文件。

const upload = require('./upload/index'); app.use(express.static(path.join(__dirname, 'public')));app.use('/file', express.static(path.join(__dirname, 'static'))); app.use('/upload', upload);

下面是文件层级图。

-- static    -- big    -- doc    -- temp-- upload    - index.js    - util.js-- app.js

const express = require('express');const Router = express.Router();const formidable = require('formidable');const path = require('path');const fs = require('fs');const baseUrl = 'http://localhost:3000/file/doc/';const dirPath = path.join(__dirname, '../static/') // 普通文件上传Router.post('/', (req, res) => {    let form = formidable({        multiples: true,        uploadDir: dirPath+'temp/'    })     form.parse(req, (err,fields, files)=> {        if (err) {            return res.json(err);        }        let newPath = dirPath+'doc/'+files.file.name;        fs.rename(files.file.path, newPath, function(err) {            if (err) {                return res.json(err);            }            return res.json({                code: 200,                msg: 'get_succ',                data: {                    url: baseUrl + files.file.name                }            })        })            }) }); module.exports = Router;

大文件

这个大文件断点续传，其实就是在之前文件上传的基础上进一步扩展而来的。所以前端部分的结构和样式一样，就是方法不一样。

前端部分

这里主要是方法介绍。

获取元素

const bigFile = document.querySelector('#big-file');let bigCurrent = document.querySelector('#big-current');let bigLinks = document.querySelector('#big-links');let fileArr = [];let md5Val = '';let ext www.easck.com= '';

检测文件

bigFile.addEventListener('change', (e) => {    let file = e.target.files[0];    if (file.type.indexOf('application') == -1) {        return alert('文件格式只能是文档应用！');    }    if ((file.size / (1000*1000)) > 100) {        return alert('文件不能大于100MB！');    }    this.uploadBig(file);}, false);

切割文件

// 切割文件function sliceFile (file) {    const files = [];    const chunkSize = 128*1024;    for (let i = 0; i < file.size; i+=chunkSize) {        const end = i + chunkSize >= file.size ? file.size : i + chunkSize;        let currentFile = file.slice(i, (end > file.size ? file.size : end));        files.push(currentFile);    }    return files;}

获取文件的md5值

// 获取文件md5值function md5File (files) {    const spark = new SparkMD5.ArrayBuffer();    let fileReader;    for (var i = 0; i < files.length; i++) {        fileReader = new FileReader();        fileReader.readAsArrayBuffer(files[i]);    }    return new Promise((resolve) => {        fileReader.onload = function(e) {            spark.append(e.target.result);            if (i == files.length) {                resolve(spark.end());            }        }    })}

上传分片文件

async function uploadSlice (chunkIndex = 0) {    let formData = new FormData();    formData.append('file', fileArr[chunkIndex]);    let data = await axios({        url: `${baseUrl}/upload/big?type=upload&current=${chunkIndex}&md5Val=${md5Val}&total=${fileArr.length}`,        method: 'post',        data: formData,    })     if (data.data.code == 200) {        if (chunkIndex < fileArr.length -1 ){            bigCurrent.style.width = Math.round((chunkIndex+1) / fileArr.length * 100) + '%';            ++chunkIndex;            uploadSlice(chunkIndex);        } else {            mergeFile();        }    }}

合并文件

async function mergeFile () {    let data = await axios.post(`${baseUrl}/upload/big?type=merge&md5Val=${md5Val}&total=${fileArr.length}&ext=${ext}`);    if (data.data.code == 200) {        alert('上传成功！');        bigCurrent.style.width = '100%';        bigLinks.href = data.data.data.url;    } else {        alert(data.data.data.info);    }}

后端部分

获取参数

获取上传参数并且作判断。

let type = req.query.type;let md5Val = req.query.md5Val;let total = req.query.total;let bigDir = dirPath + 'big/';let typeArr = ['check', 'upload', 'merge'];if (!type) {    return res.json({        code: 101,        msg: 'get_fail',        data: {            info: '上传类型不能为空！'        }    })} if (!md5Val) {    return res.json({        code: 101,        msg: 'get_fail',        data: {            info: '文件md5值不能为空！'        }    })} if (!total) {    return res.json({        code: 101,        msg: 'get_fail',        data: {            info: '文件切片数量不能为空！'        }    })} if (!typeArr.includes(type)) {    return res.json({        code: 101,        msg: 'get_fail',        data: {            info: '上传类型错误！'        }    })}

类型是检测

let filePath = `${bigDir}${md5Val}`;fs.readdir(filePath, (err, data) => {    if (err) {        fs.mkdir(filePath, (err) => {            if (err) {                return res.json({                    code: 101,                    msg: 'get_fail',                    data: {                        info: '获取失败！',                        err                    }                })            } else {                return res.json({                    code: 200,                    msg: 'get_succ',                    data: {                        info: '获取成功！',                        data: {                            type: 'write',                            chunk: [],                            total: 0                        }                    }                })            }        })    } else {        return res.json({            code: 200,            msg: 'get_succ',            data: {                info: '获取成功！',                data: {                    type: 'read',                    chunk: data,                    total: data.length                }            }        })    }    })

类型是上传的

let current = req.query.current;if (!current) {    return res.json({        code: 101,        msg: 'get_fail',        data: {            info: '文件当前分片值不能为空！'        }    })} let form = formidable({    multiples: true,    uploadDir: `${dirPath}big/${md5Val}/`,}) form.parse(req, (err,fields, files)=> {    if (err) {        return res.json(err);    }    let newPath = `${dirPath}big/${md5Val}/${current}`;    fs.rename(files.file.path, newPath, function(err) {        if (err) {            return res.json(err);        }        return res.json({            code: 200,            msg: 'get_succ',            data: {                info: 'upload success!'            }        })    })    })

类型是合并的

let ext = req.query.ext;if (!ext) {    return res.json({        code: 101,        msg: 'get_fail',        data: {            info: '文件后缀不能为空！'        }    })} let oldPath = `${dirPath}big/${md5Val}`;let newPath = `${dirPath}doc/${md5Val}.${ext}`;let data = await mergeFile(oldPath, newPath);if (data.code == 200) {    return res.json({        code: 200,        msg: 'getwww.easck.com_succ',        data: {            info: '文件合并成功！',            url: `${baseUrl}${md5Val}.${ext}`        }    })} else {    return res.json({        code: 101,        msg: 'get_fail',        data: {            info: '文件合并失败！',            err: data.data.error        }    })}

在合并这个功能里面主要使用的是fs的createWriteStream以及createReadStream方法实现的。

合并文件

const fs = require('fs'); function mergeFile (filePath, newPath) {    return new Promise((resolve, reject) => {        let files = fs.readdirSync(filePath),        newFile = fs.createWriteStream(newPath);        let filesArr = arrSort(files).reverse();        main();        function main (index = 0) {            let currentFile = filePath + '/'+filesArr[index];            let stream = fs.createReadStream(currentFile);            stream.pipe(newFile, {end: false});            stream.on('end', function () {                if (index < filesArr.length - 1) {                    index++;                    main(index);                } else {                    resolve({code: 200});                }            })            stream.on('error', function (error) {                  reject({code: 102, data:{error}})            })        }    })}

文件排序

function arrSort (arr) {    for (let i = 0; i < arr.length; i++) {        for (let j = 0; j < arr.length; j++) {            if (Number(arr[i]) >= Number(arr[j])) {                let t = arr[i];                arr[i] = arr[j];                arr[j] = t;            }        }    }    return arr;}