欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Node.js的大文件分片上傳示例

 更新時(shí)間：2019年06月19日 09:24:14   作者：飯等米  
這篇文章主要介紹了基于Node.js的大文件分片上傳示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我們?cè)谧鑫募蟼鞯臅r(shí)候，如果文件過(guò)大，可能會(huì)導(dǎo)致請(qǐng)求超時(shí)的情況。所以，在遇到需要對(duì)大文件進(jìn)行上傳的時(shí)候，就需要對(duì)文件進(jìn)行分片上傳的操作。同時(shí)如果文件過(guò)大，在網(wǎng)絡(luò)不佳的情況下，如何做到斷點(diǎn)續(xù)傳？也是需要記錄當(dāng)前上傳文件，然后在下一次進(jìn)行上傳請(qǐng)求的時(shí)候去做判斷。

先上代碼：代碼倉(cāng)庫(kù)地址

前端

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; // 每個(gè)chunk的大小，設(shè)置為1兆
      // 使用Blob.slice方法來(lái)對(duì)文件進(jìn)行分割。
      // 同時(shí)該方法在不同的瀏覽器使用方式不同。
      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值的時(shí)候, 如果文件內(nèi)容相同，而名稱不同的時(shí)候
              // 想保留兩個(gè)文件無(wú)法保留。所以把文件名稱加上。
              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為一個(gè)File對(duì)象數(shù)組，如果允許多選的時(shí)候，文件為多個(gè)
        const files = fileDom.files;
        const file = files[0];
        if (!file) {
          alert('沒(méi)有獲取文件');
          return;
        }
        const blockCount = Math.ceil(file.size / chunkSize); // 分片總數(shù)
        const axiosPromiseArray = []; // axiosPromise數(shù)組
        const hash = await hashFile(file); //文件 hash 
        // 獲取文件hash之后，如果需要做斷點(diǎn)續(xù)傳，可以根據(jù)hash值去后臺(tái)進(jìn)行校驗(yàn)。
        // 看看是否已經(jīng)上傳過(guò)該文件，并且是否已經(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提交 分片，此時(shí) 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));
        }
        // 所有分片上傳后，請(qǐng)求合并分片文件
        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>大文件上傳測(cè)試</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)當(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)建存儲(chǔ)文件
  // 合并
  const chunksPath = path.join(uploadPath, hash, '/');
  const filePath = path.join(uploadPath, name);
  // 讀取所有的chunks 文件名存放在數(shù)組中
  const chunks = fs.readdirSync(chunksPath);
  // 創(chuàng)建存儲(chǔ)文件
  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)行入庫(kù)。
  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
};

操作步驟說(shuō)明

服務(wù)端的搭建

我們以下的操作都是保證在已經(jīng)安裝node以及npm的前提下進(jìn)行。node的安裝以及使用可以參考官方網(wǎng)站。

1、新建項(xiàng)目文件夾file-upload

2、使用npm初始化一個(gè)項(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   // 請(qǐng)求參數(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)目啟動(dòng)：node app.js (可以使用 nodemon 來(lái)對(duì)服務(wù)進(jìn)行管理)

7、訪問(wèn)：http://localhost:9000/index.html

其中細(xì)節(jié)部分代碼里有相應(yīng)的注釋說(shuō)明，瀏覽代碼就一目了然。

后續(xù)延伸：斷點(diǎn)續(xù)傳、多文件多批次上傳

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論