溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用Node.js怎么實現一個大文件分片上傳功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
前端
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的大小，設置為1兆 // 使用Blob.slice方法來對文件進行分割。 // 同時該方法在不同的瀏覽器使用方式不同。 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值的時候, 如果文件內容相同，而名稱不同的時候 // 想保留兩個文件無法保留。所以把文件名稱加上。 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對象數組，如果允許多選的時候，文件為多個 const files = fileDom.files; const file = files[0]; if (!file) { alert('沒有獲取文件'); return; } const blockCount = Math.ceil(file.size / chunkSize); // 分片總數 const axiosPromiseArray = []; // axiosPromise數組 const hash = await hashFile(file); //文件 hash // 獲取文件hash之后，如果需要做斷點續傳，可以根據hash值去后臺進行校驗。 // 看看是否已經上傳過該文件，并且是否已經傳送完成以及已經上傳的切片。 console.log(hash); for (let i = 0; i < blockCount; i++) { const start = i * chunkSize; const end = Math.min(file.size, start + chunkSize); // 構建表單 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 => { // 處理上傳的進度 console.log(blockCount, i, e, file); }, }; // 加入到 Promise 數組中 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> <h2>大文件上傳測試</h2> <section> <h4>自定義上傳文件</h4> <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...')
// 根據文件hash創建文件夾，把默認上傳的文件移動當前hash文件夾下。方便后續文件合并。
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;
// 根據hash值，獲取分片文件。
// 創建存儲文件
// 合并
const chunksPath = path.join(uploadPath, hash, '/');
const filePath = path.join(uploadPath, name);
// 讀取所有的chunks 文件名存放在數組中
const chunks = fs.readdirSync(chunksPath);
// 創建存儲文件
fs.writeFileSync(filePath, '');
if(chunks.length !== total || chunks.length === 0) {
ctx.status = 200;
ctx.res.end('切片文件數量不符合');
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);
// 文件合并成功，可以把文件信息進行入庫。
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
};操作步驟說明
服務端的搭建
我們以下的操作都是保證在已經安裝node以及npm的前提下進行。node的安裝以及使用可以參考官方網站。
1、新建項目文件夾file-upload
2、使用npm初始化一個項目：cd file-upload && npm init
3、安裝相關依賴
npm i koa npm i koa-router --save // Koa路由 npm i koa-multer --save // 文件上傳處理模塊 npm i koa-static --save // Koa靜態資源處理模塊 npm i fs-extra --save // 文件處理 npm i koa-body --save // 請求參數解析
4、創建項目結構
file-upload - static - index.html - spark-md5.min.js - uploads - temp - utils - dir.js - app.js
5、復制相應的代碼到指定位置即可
6、項目啟動：node app.js (可以使用 nodemon 來對服務進行管理)
7、訪問：http://localhost:9000/index.html
看完上述內容，你們掌握使用Node.js怎么實現一個大文件分片上傳功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
