使用Node.js怎么實(shí)現(xiàn)一個大文件分片上傳功能？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)專注于蔡家坡企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,電子商務(wù)商城網(wǎng)站建設(shè)。蔡家坡網(wǎng)站建設(shè)公司,為蔡家坡等地區(qū)提供建站服務(wù)。全流程按需開發(fā)網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

前端

1. index.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、新建項(xiàng)目文件夾file-upload

2、使用npm初始化一個項(xiàng)目：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)建項(xià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、項(xiàng)目啟動：node app.js (可以使用 nodemon 來對服務(wù)進(jìn)行管理)

7、訪問：http://localhost:9000/index.html

看完上述內(nèi)容，你們掌握使用Node.js怎么實(shí)現(xiàn)一個大文件分片上傳功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！