Node中文件斷點(diǎn)續(xù)傳原理和方法總結(jié)

更新時(shí)間：2022年01月14日 10:01:49 作者：MarkGuan

在之前做過(guò)一個(gè)小項(xiàng)目，涉及到了文件上傳，在大文件上面使用了斷點(diǎn)續(xù)傳，降低了服務(wù)器方面的壓力，現(xiàn)在小編把Node中文件斷點(diǎn)續(xù)傳原理和方法總結(jié)分享給大家，感興趣的朋友一起看看吧

導(dǎo)語(yǔ)：之前做過(guò)一個(gè)小項(xiàng)目，其中用到了文件上傳，在大文件上面使用了斷點(diǎn)續(xù)傳，降低了服務(wù)器方面的壓力，現(xiàn)在就這個(gè)開(kāi)發(fā)經(jīng)驗(yàn)做一個(gè)細(xì)致的總結(jié)。

原理介紹

這里先介紹一下文件上傳的原理，幫助理清這個(gè)頭緒。

普通上傳

一般網(wǎng)站上都是普通上傳的比較多，大多數(shù)都是上傳一些用戶的頭像，用戶的動(dòng)態(tài)評(píng)論附帶圖片什么的，所以先來(lái)說(shuō)一下這個(gè)的原理。

用戶選擇文件后，js檢測(cè)文件大小是否超出限制和格式是否正確；
檢查后使用ajax提交請(qǐng)求，服務(wù)端也進(jìn)行二次驗(yàn)證后儲(chǔ)存到服務(wù)器；
后端返回文件地址到前端，渲染頁(yè)面數(shù)據(jù)；

大文件上傳

用戶選擇文件后，js檢測(cè)文件大小是否超出限制和格式是否正確；

根據(jù)文件大小，使用file.slice方法進(jìn)行文件分割；

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

使用ajax提交請(qǐng)求，服務(wù)端收到后返回文件在服務(wù)器的信息；

如果存在這個(gè)md5值的文件夾，則返回文件夾里面上傳了多少文件；
不存在則新建一個(gè)這個(gè)md5值的文件夾，返回空內(nèi)容；

前端收到信息后，根據(jù)返回信息作出判斷；

如果返回的文件長(zhǎng)度等于切片的總長(zhǎng)度，則請(qǐng)求合并文件；
如果返回的文件長(zhǎng)度小于切片的總長(zhǎng)度，則開(kāi)始上傳對(duì)應(yīng)的切片文件，直至上傳完最后一個(gè)切片再請(qǐng)求合并文件；

后端收到合并的請(qǐng)求后，對(duì)對(duì)應(yīng)的md5值的文件夾里面的文件進(jìn)行合并，返回文件地址；

前端收到文件地址后，渲染頁(yè)面數(shù)據(jù)；

斷點(diǎn)續(xù)傳

這個(gè)的意思就是文件上傳過(guò)程中，如果遇到不可抗力，比如網(wǎng)絡(luò)中斷，服務(wù)器異常，或者其他原因?qū)е律蟼髦袛啵?/p>

下次再次上傳時(shí)候，服務(wù)端根據(jù)這個(gè)文件的md5值找出上傳了多少，還剩下多少未上傳，發(fā)送給客戶端，客戶端收到后繼續(xù)對(duì)未上傳的進(jìn)行上傳，上傳完成后合并文件并返回地址。

這樣就避免了文件重復(fù)上傳，浪費(fèi)服務(wù)器空間使用，節(jié)約服務(wù)器資源，而且速度比上傳一個(gè)大文件更快，更高效。

方法總結(jié)

接下來(lái)根據(jù)上面的邏輯原理分析步驟，進(jìn)行代碼功能實(shí)現(xiàn)。

普通文件

本小節(jié)講述普通文件的上傳，包括前端部分和后端部分。

前端部分

html部分

先來(lái)建立個(gè)小房子

<div class="upload">
        <h3>普通上傳</h3>
        <form>
            <div class="upload-file">
                <label for="file">請(qǐng)選擇文件</label>
                <input type="file" name="file" id="file" accept="image/*">
            </div>
            <div class="upload-progress">
                當(dāng)前進(jìn)度：
                <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">請(qǐng)選擇文件</label>
                <input type="file" name="file" id="big-file" accept="application/*">
            </div>
            <div class="upload-progress">
                當(dāng)前進(jìn)度：
                <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兩個(gè)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部分

來(lái)裝飾一下這個(gè)房子。

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部分

最后加上互動(dòng)效果。

// 獲取元素
const file = document.querySelector('#file');
let current = document.querySelector('#current');
let links = document.querySelector('#links');
let baseUrl = 'http://localhost:3000';
 
// 監(jiān)聽(tīng)文件事件
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('上傳失敗！')
    }
}

后端部分

打開(kāi)上次的文件夾demo,先來(lái)下載安裝一個(gè)處理文件的包formidable,然后開(kāi)始處理上傳的文件啦！

新建一個(gè)文件夾,別忘了在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);

下面是文件層級(jí)圖。

-- 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;

大文件

這個(gè)大文件斷點(diǎn)續(xù)傳，其實(shí)就是在之前文件上傳的基礎(chǔ)上進(jìn)一步擴(kuò)展而來(lái)的。所以前端部分的結(jié)構(gòu)和樣式一樣，就是方法不一樣。

前端部分

這里主要是方法介紹。

獲取元素

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

檢測(cè)文件

bigFile.addEventListener('change', (e) => {
    let file = e.target.files[0];
    if (file.type.indexOf('application') == -1) {
        return alert('文件格式只能是文檔應(yīng)用！');
    }
    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);
    }
}

后端部分

獲取參數(shù)

獲取上傳參數(shù)并且作判斷。

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: '文件切片數(shù)量不能為空！'
        }
    })
}
 
if (!typeArr.includes(type)) {
    return res.json({
        code: 101,
        msg: 'get_fail',
        data: {
            info: '上傳類型錯(cuò)誤！'
        }
    })
}

類型是檢測(cè)

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: '文件當(dāng)前分片值不能為空！'
        }
    })
}
 
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
        }
    })
}

在合并這個(gè)功能里面主要使用的是fs的createWriteStream以及createReadStream方法實(shí)現(xiàn)的。

合并文件

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;
}