乐趣区

关于node.js:Node中文件断点续传原理和方法总结

jiezi

导语：之前做过一个小我的项目，其中用到了文件上传，在大文件下面应用了断点续传，升高了服务器方面的压力，当初就这个开发教训做一个粗疏的总结。

目录

  • 原理介绍
  • 办法总结
  • 实战演练

原理介绍

这里先介绍一下文件上传的原理，帮忙理清这个脉络。

一般上传

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

  • 用户抉择文件后，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();" 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="_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 = '';
  • 检测文件
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: 'get_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;
}

实战演练

当初办法也写好了，来测试下是否 OK。

这里筹备了两个文件，来别离测试两个性能。

  • 一般文件

这个是一般文件上传界面

上传胜利后：

后端返回内容：

关上文件地址预览：

能够看到胜利了！

  • 大文件

这个是大文件文件上传界面

上传胜利后：

这个是某个分片文件正在上传：

这个是文件分片上传后合并返回的内容：

关上文件地址预览：

再次上传发现很快返回文件地址：

这个是 nodejs 目录截图，能够看到文件的分片保留完整，合并的也很好。


这个文件上传和断点续传就讲到这里，当然，我下面所说的办法只是一种，作为参考。如果你有更好的办法，请分割我。

退出移动版