基于Node.js的大文件分片上傳示例
更新時間：2019年06月19日 09:24:14 作者：飯等米
這篇文章主要介紹了基于Node.js的大文件分片上傳示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
我們在做文件上傳的時候，如果文件過大，可能會導(dǎo)致請求超時的情況。所以，在遇到需要對大文件進(jìn)行上傳的時候，就需要對文件進(jìn)行分片上傳的操作。同時如果文件過大，在網(wǎng)絡(luò)不佳的情況下，如何做到斷點續(xù)傳？也是需要記錄當(dāng)前上傳文件，然后在下一次進(jìn)行上傳請求的時候去做判斷。
先上代碼：代碼倉庫地址
前端
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文件上傳</title>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="./spark-md5.min.js"></script>
<script>
$(document).ready(() => {
const chunkSize = 1 * 1024 * 1024; // 每個chunk的大小，設(shè)置為1兆
// 使用Blob.slice方法來對文件進(jìn)行分割。
// 同時該方法在不同的瀏覽器使用方式不同。
const blobSlice =
File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
const hashFile = (file) => {
return new Promise((resolve, reject) => {
const chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;
const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader();
function loadNext() {
const start = currentChunk * chunkSize;
const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
fileReader.onload = e => {
spark.append(e.target.result); // Append array buffer
currentChunk += 1;
if (currentChunk < chunks) {
loadNext();
} else {
console.log('finished loading');
const result = spark.end();
// 如果單純的使用result 作為hash值的時候, 如果文件內(nèi)容相同，而名稱不同的時候
// 想保留兩個文件無法保留。所以把文件名稱加上。
const sparkMd5 = new SparkMD5();
sparkMd5.append(result);
sparkMd5.append(file.name);
const hexHash = sparkMd5.end();
resolve(hexHash);
}
};
fileReader.onerror = () => {
console.warn('文件讀取失敗！');
};
loadNext();
}).catch(err => {
console.log(err);
});
}
const submitBtn = $('#submitBtn');
submitBtn.on('click', async () => {
const fileDom = $('#file')[0];
// 獲取到的files為一個File對象數(shù)組，如果允許多選的時候，文件為多個
const files = fileDom.files;
const file = files[0];
if (!file) {
alert('沒有獲取文件');
return;
}
const blockCount = Math.ceil(file.size / chunkSize); // 分片總數(shù)
const axiosPromiseArray = []; // axiosPromise數(shù)組
const hash = await hashFile(file); //文件 hash
// 獲取文件hash之后，如果需要做斷點續(xù)傳，可以根據(jù)hash值去后臺進(jìn)行校驗。
// 看看是否已經(jīng)上傳過該文件，并且是否已經(jīng)傳送完成以及已經(jīng)上傳的切片。
console.log(hash);
for (let i = 0; i < blockCount; i++) {
const start = i * chunkSize;
const end = Math.min(file.size, start + chunkSize);
// 構(gòu)建表單
const form = new FormData();
form.append('file', blobSlice.call(file, start, end));
form.append('name', file.name);
form.append('total', blockCount);
form.append('index', i);
form.append('size', file.size);
form.append('hash', hash);
// ajax提交 分片，此時 content-type 為 multipart/form-data
const axiosOptions = {
onUploadProgress: e => {
// 處理上傳的進(jìn)度
console.log(blockCount, i, e, file);
},
};
// 加入到 Promise 數(shù)組中
axiosPromiseArray.push(axios.post('/file/upload', form, axiosOptions));
}
// 所有分片上傳后，請求合并分片文件
await axios.all(axiosPromiseArray).then(() => {
// 合并chunks
const data = {
size: file.size,
name: file.name,
total: blockCount,
hash
};
axios
.post('/file/merge_chunks', data)
.then(res => {
console.log('上傳成功');
console.log(res.data, file);
alert('上傳成功');
})
.catch(err => {
console.log(err);
});
});
});
})
window.onload = () => {
}
</script>
</head>
<body>
<h1>大文件上傳測試</h1>
<section>
<h3>自定義上傳文件</h3>
<input id="file" type="file" name="avatar"/>
<div>
<input id="submitBtn" type="button" value="提交">
</div>
</section>
</body>
</html>
2. 依賴的文件
axios.js
jquery
spark-md5.js
后端
1. app.js
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const multer = require('koa-multer');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs-extra');
const koaBody = require('koa-body');
const { mkdirsSync } = require('./utils/dir');
const uploadPath = path.join(__dirname, 'uploads');
const uploadTempPath = path.join(uploadPath, 'temp');
const upload = multer({ dest: uploadTempPath });
const router = new Router();
app.use(koaBody());
/**
* single(fieldname)
* Accept a single file with the name fieldname. The single file will be stored in req.file.
*/
router.post('/file/upload', upload.single('file'), async (ctx, next) => {
console.log('file upload...')
// 根據(jù)文件hash創(chuàng)建文件夾，把默認(rèn)上傳的文件移動當(dāng)前hash文件夾下。方便后續(xù)文件合并。
const {
name,
total,
index,
size,
hash
} = ctx.req.body;
const chunksPath = path.join(uploadPath, hash, '/');
if(!fs.existsSync(chunksPath)) mkdirsSync(chunksPath);
fs.renameSync(ctx.req.file.path, chunksPath + hash + '-' + index);
ctx.status = 200;
ctx.res.end('Success');
})
router.post('/file/merge_chunks', async (ctx, next) => {
const {
size, name, total, hash
} = ctx.request.body;
// 根據(jù)hash值，獲取分片文件。
// 創(chuàng)建存儲文件
// 合并
const chunksPath = path.join(uploadPath, hash, '/');
const filePath = path.join(uploadPath, name);
// 讀取所有的chunks 文件名存放在數(shù)組中
const chunks = fs.readdirSync(chunksPath);
// 創(chuàng)建存儲文件
fs.writeFileSync(filePath, '');
if(chunks.length !== total || chunks.length === 0) {
ctx.status = 200;
ctx.res.end('切片文件數(shù)量不符合');
return;
}
for (let i = 0; i < total; i++) {
// 追加寫入到文件中
fs.appendFileSync(filePath, fs.readFileSync(chunksPath + hash + '-' +i));
// 刪除本次使用的chunk
fs.unlinkSync(chunksPath + hash + '-' +i);
}
fs.rmdirSync(chunksPath);
// 文件合并成功，可以把文件信息進(jìn)行入庫。
ctx.status = 200;
ctx.res.end('合并成功');
})
app.use(router.routes());
app.use(router.allowedMethods());
app.use(serve(__dirname + '/static'));
app.listen(9000);
2. utils/dir.js
const path = require('path');
const fs = require('fs-extra');
const mkdirsSync = (dirname) => {
if(fs.existsSync(dirname)) {
return true;
} else {
if (mkdirsSync(path.dirname(dirname))) {
fs.mkdirSync(dirname);
return true;
}
}
}
module.exports = {
mkdirsSync
};
操作步驟說明
服務(wù)端的搭建
我們以下的操作都是保證在已經(jīng)安裝node以及npm的前提下進(jìn)行。node的安裝以及使用可以參考官方網(wǎng)站。
1、新建項目文件夾file-upload
2、使用npm初始化一個項目：cd file-upload && npm init
3、安裝相關(guān)依賴
npm i koa npm i koa-router --save // Koa路由 npm i koa-multer --save // 文件上傳處理模塊 npm i koa-static --save // Koa靜態(tài)資源處理模塊 npm i fs-extra --save // 文件處理 npm i koa-body --save // 請求參數(shù)解析
4、創(chuàng)建項目結(jié)構(gòu)
file-upload
- static
- index.html
- spark-md5.min.js
- uploads
- temp
- utils
- dir.js
- app.js
5、復(fù)制相應(yīng)的代碼到指定位置即可
6、項目啟動：node app.js (可以使用 nodemon 來對服務(wù)進(jìn)行管理)
7、訪問：http://localhost:9000/index.html
其中細(xì)節(jié)部分代碼里有相應(yīng)的注釋說明，瀏覽代碼就一目了然。
后續(xù)延伸：斷點續(xù)傳、多文件多批次上傳
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Express服務(wù)器端代碼熱加載的實現(xiàn)代碼
這篇文章主要介紹了Express服務(wù)器端代碼熱加載的實現(xiàn)，文中通過代碼示例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
Node.js 緩沖區(qū)（Buffer）模塊的方法及實例分析
在本篇文章里小編給大家整理了一篇關(guān)于Node.js 緩沖區(qū)（Buffer）模塊的方法及實例分析，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2022-01-01
node.js正則表達(dá)式獲取網(wǎng)頁中所有鏈接的代碼實例
這篇文章主要介紹了node.js正則表達(dá)式獲取網(wǎng)頁中所有鏈接的代碼實例,使用正則表達(dá)式實現(xiàn),需要的朋友可以參考下2014-06-06
這篇文章主要給大家介紹了關(guān)于Ubuntu安裝Node.js的2種方式,在Ubuntu系統(tǒng)上安裝Node.js和npm非常簡單,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Node.js中child_process實現(xiàn)多進(jìn)程
這篇文章主要介紹了Node.js中child_process實現(xiàn)多進(jìn)程,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了nodejs入門教程之express模塊用法,結(jié)合實例形式分析了express模塊的功能、創(chuàng)建、路由相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
nodejs實現(xiàn)百度輿情接口應(yīng)用示例
這篇文章主要介紹了nodejs實現(xiàn)百度輿情接口應(yīng)用,結(jié)合實例形式分析了node.js調(diào)用百度輿情接口的具體使用技巧,需要的朋友可以參考下2020-02-02
本文介紹了使用Node.js搭建后臺的實現(xiàn)步驟,文章詳細(xì)闡述了每個步驟的實現(xiàn)過程,并給出了示例代碼,對于想要了解如何使用Node.js搭建后臺的讀者具有一定的參考價值2023-08-08
這篇文章主要介紹了node.js +mongdb實現(xiàn)登錄功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
下面小編就為大家?guī)硪黄猲odejs操作mysql實現(xiàn)增刪改查的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05