2. 程式人生 > >nodeJs + js 大檔案分片上傳

nodeJs + js 大檔案分片上傳

阿新 • • 發佈：2020-08-03

簡單的檔案上傳

一、準備檔案上傳的條件：

1、安裝nodejs環境

2、安裝vue環境

3、驗證環境是否安裝成功

二、實現上傳步驟

1、前端部分使用 vue-cli 腳手架，搭建一個 demo 版本，能夠實現簡單互動：

<template>
  <div id="app">
    <input type="file" @change="uploadFile"></button>
  </div>
</template>

2、安裝 axios 實現與後端互動：

import Axios from 'axios'

const Server = Axios.create({
  baseURL: '/api'
})

export default Server

3、後端使用 node-koa 框架：

// index.js
const Koa = require('koa');
const router = require('koa-router')() // koa路由元件
const fs = require('fs') // 檔案元件
const path = require('path') // 路徑元件
const koaBody = require('koa-body') //解析上傳檔案的外掛
const static = require('koa-static') // 訪問伺服器靜態資源元件

const uploadPath = path.join(__dirname, 'public/uploads') // 檔案上傳目錄

const app = new Koa(); // 例項化 koa

// 定義靜態資源訪問規則
app.use(static('public', {
  maxAge: 30 * 24 * 3600 * 1000 // 靜態資源快取時間 ms
}))

app.use(koaBody({
  multipart: true,
  formidable: {
 
    uploadDir: uploadPath,
    maxFileSize: 10000 * 1024 * 1024    // 設定上傳檔案大小最大限制，預設20M
  }
}))

// 對於任何請求，app將呼叫該非同步函式處理請求：
app.use(async (ctx, next) => {
  console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);

  ctx.set('Access-Control-Allow-Origin', '*');//*表示可以跨域任何域名都行 也可以填域名錶示只接受某個域名
  ctx.set('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,token');//可以支援的訊息首部列表
  ctx.set('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');//可以支援的提交方式
  ctx.set('Content-Type', 'application/json;charset=utf-8');//請求頭中定義的型別

  if (ctx.request.method === 'OPTIONS') {
    ctx.response.status = 200
  }

  try {
    await next();
  } catch (err) {
    console.log(err, 'errmessage')
    ctx.response.status = err.statusCode || err.status || 500
    ctx.response.body = {
      errcode: 500,
      msg: err.message
    }
    ctx.app.emit('error', err, ctx);
  }
})

4、前端實現上傳請求：

// vue
export default {
  name: 'App',
  methods: {
    uploadFile(e) {
      const file = e.target.files[0]
      this.sendFile(file)    
    },
    sendFile(file) {
      let formdata = new FormData()
      formdata.append("file", file)

      this.$http({
        url: "/upload/file",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      }).then(({ data }) => {
        console.log(data, 'upload/file')
      })
    }
  }  
}

5、node 接收檔案介面：

router.post('/api/upload/file', function uploadFile(ctx) {
  const files = ctx.request.files
  const filePath = path.join(uploadPath, files.file.name)

  // 建立可讀流
  const reader = fs.createReadStream(files['file']['path']);
  // 建立可寫流
  const upStream = fs.createWriteStream(filePath);
  // 可讀流通過管道寫入可寫流
  reader.pipe(upStream);

  ctx.response.body = {
    code: 0,
    url: path.join('http://localhost:3000/uploads', files.file.name),
    msg: '檔案上傳成功'
  }
})

以上全部過程就實現了一個簡單的檔案上傳功能。

 

 

 

這種實現方式上傳功能對於小檔案來說沒什麼問題，但當需求中碰到大檔案的時候，能解決上傳中遇到的各種問題，比如網速不好時、上傳速度慢、斷網情況、暫停上傳、重複上傳等問題。想要解決以上問題則需要優化前面的邏輯。

分片上傳

1、分片邏輯如下：

  • 由於前端已有 Blob Api 能操作檔案二進位制，因此最核心邏輯就是前端運用 Blob Api 對大檔案進行檔案分片切割，將一個大檔案切成一個個小檔案，然後將這些分片檔案一個個上傳。
  • 現在的 http 請求基本是 1.1 版本，瀏覽器能夠同時進行多個請求，這將用到一個叫 js 非同步併發控制的處理邏輯。
  • 當前端將所有分片上傳完成之後，前端再通知後端進行分片合併成檔案。

2、在進行檔案分片處理之前，先介紹下 js 非同步併發控制：

function sendRequest(arr, max = 6, callback) {
  let i = 0 // 陣列下標
  let fetchArr = [] // 正在執行的請求

  let toFetch = () => {
    // 如果非同步任務都已開始執行，剩最後一組，則結束併發控制
    if (i === arr.length) {
      return Promise.resolve()
    }

    // 執行非同步任務
    let it = fetch(arr[i++])
    // 新增非同步事件的完成處理
    it.then(() => {
      fetchArr.splice(fetchArr.indexOf(it), 1)
    })
    fetchArr.push(it)

    let p = Promise.resolve()
    // 如果併發數達到最大數，則等其中一個非同步任務完成再新增
    if (fetchArr.length >= max) {
      p = Promise.race(fetchArr)
    }

    // 執行遞迴
    return p.then(() => toFetch())
  }

  toFetch().then(() => 
    // 最後一組全部執行完再執行回撥函式
    Promise.all(fetchArr).then(() => {
      callback()
    })
  )
}

js 非同步併發控制的邏輯是：運用 Promise 功能，定義一個數組 fetchArr，每執行一個非同步處理往 fetchArr 新增一個非同步任務，當非同步操作完成之後，則將當前非同步任務從 fetchArr 刪除，則當非同步 fetchArr 數量沒有達到最大數的時候，就一直往 fetchArr 新增，如果達到最大數量的時候，運用 Promise.race Api，每完成一個非同步任務就再新增一個，當所有最後一個非同步任務放進了 fetchArr 的時候，則執行 Promise.all，等全部完成之後則執行回撥函式。

上面這邏輯剛好適合大檔案分片上傳場景，將所有分片上傳完成之後，執行回撥請求後端合併分片。

前端改造：

1、定義一些全域性引數：

export default {
  name: 'App',
  data() {
    return {
      remainChunks: [], // 剩餘切片
      isStop: false, // 暫停上傳控制
      precent: 0, // 上傳百分比
      uploadedChunkSize: 0, // 已完成上傳的切片數
      chunkSize: 2 * 1024 * 1024 // 切片大小
    }
  }
}

2、檔案分割方法：

cutBlob(file) {
  const chunkArr = [] // 所有切片快取陣列
  const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice // 切割Api不同瀏覽器分割處理
  const spark = new SparkMD5.ArrayBuffer() // 檔案hash處理
  const chunkNums = Math.ceil(file.size / this.chunkSize) // 切片總數

  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsArrayBuffer(file)
    reader.addEventListener('loadend', () => {
      const content = reader.result

      // 生成檔案hash
      spark.append(content)
      const hash = spark.end()

      let startIndex = ''
      let endIndex = ''
      let contentItem = ''

      // 檔案切割
      for(let i = 0; i < chunkNums; i++) {
        startIndex = i * this.chunkSize
        endIndex = startIndex + this.chunkSize
        endIndex > file.size && (endIndex = file.size)

        contentItem = blobSlice.call(file, startIndex, endIndex)

        chunkArr.push({
          index: i,
          hash,
          total: chunkNums,
          name: file.name,
          size: file.size,
          chunk: contentItem
        })
      }
      resolve({
        chunkArr,
        fileInfo: {
          hash,
          name: file.name,
          size: file.size
        }
      })
    })
    reader.addEventListener('error', function _error(err) {
      reject(err)
    })
  })
}

以上方式的處理邏輯：定義一個切片快取陣列，當檔案進行分片之後，將快取所有的分片資訊、根據最大分片大小計算分片數量、計算整個檔案的 hash (spark-md5) 值，這將意味著，只要檔案內容不變，這 hash 值也將不變，這涉及到後面的秒傳功能、然後進行檔案分片。

 3、改造上傳方法：

async uploadFile(e) {
  const file = e.target.files[0]
  this.precent = 0
  this.uploadedChunkSize = 0
  // 如果檔案大於分片大小5倍，則進行分片上傳
  if (file.size < this.chunkSize * 5) {
    this.sendFile(file)
  } else {
    const chunkInfo = await this.cutBlob(file)
    this.remainChunks = chunkInfo.chunkArr
    this.fileInfo = chunkInfo.fileInfo

    this.mergeRequest()
  }
}

 注意：以上程式碼中設定當檔案大小大於分片大小的5倍進行分片上傳。

4、定義分片上傳請求(sendRequest)和合並請求(chunkMerge)：

mergeRequest() {
  const chunks = this.remainChunks
  const fileInfo = this.fileInfo
  this.sendRequest(chunks, 6, () => {
    // 請求合併
    this.chunkMerge(fileInfo)
  })
}

 5、分片請求將結合上面提到的 JS 非同步併發控制：

sendRequest(arr, max = 6, callback) {
  let fetchArr = []

  let toFetch = () => {
    if (this.isStop) {
      return Promise.reject('暫停上傳')
    }
    if (!arr.length) {
      return Promise.resolve()
    }

    const chunkItem = arr.shift()
    const it = this.sendChunk(chunkItem)
    it.then(() => {
      fetchArr.splice(fetchArr.indexOf(it), 1)
    }, err => {
      this.isStop = true
      arr.unshift(chunkItem)
      Promise.reject(err)
    })
    fetchArr.push(it)

    let p = Promise.resolve()
    if (fetchArr.length >= max) {
      p = Promise.race(fetchArr)
    }

    return p.then(() => toFetch())
  }

  toFetch().then(() => {
    Promise.all(fetchArr).then(() => {
      callback()
    })
  }, err => {
    console.log(err)
  })
}

 6、切片上傳請求：

sendChunk(item) {
  let formdata = new FormData()
  formdata.append("file", item.chunk)
  formdata.append("hash", item.hash)
  formdata.append("index", item.index)
  formdata.append("name", item.name)

  return this.$http({
    url: "/upload/snippet",
    method: "post",
    data: formdata,
    headers: { "Content-Type": "multipart/form-data" },
    onUploadProgress: (e) => {
      const { loaded, total } = e
      this.uploadedChunkSize += loaded < total ? 0 : +loaded
      this.uploadedChunkSize > item.size && (this.uploadedChunkSize = item.size)

      this.precent = (this.uploadedChunkSize / item.size).toFixed(2) * 1000 / 10
    }
  })
}

 7、切片合併請求：

chunkMerge(data) {
  this.$http({
    url: "/upload/merge",
    method: "post",
    data,
  }).then(res => {
    console.log(res.data)
  })
}

前端處理檔案分片邏輯程式碼已完成

後端處理

後端部分就只新增兩個介面：分片上傳請求和分片合併請求：

1、分片上傳請求：

router.post('/api/upload/snippet', function snippet(ctx) {
  let files = ctx.request.files
  const { index, hash } = ctx.request.body

  // 切片上傳目錄
  const chunksPath = path.join(uploadPath, hash, '/')
  // 切片檔案
  const chunksFileName = chunksPath + hash + '-' + index

  if(!fs.existsSync(chunksPath)) {
    fs.mkdirSync(chunksPath)
  }
  // 秒傳，如果切片已上傳，則立即返回
  if (fs.existsSync(chunksFileName)) {
    ctx.response.body = {
      code: 0,
      msg: '切片上傳完成'
    }
    return
  }
  // 建立可讀流
  const reader = fs.createReadStream(files.file.path);
  // 建立可寫流
  const upStream = fs.createWriteStream(chunksFileName);
  // // 可讀流通過管道寫入可寫流
  reader.pipe(upStream);

  reader.on('end', () => {
    // 檔案上傳成功後，刪除本地切片檔案
    fs.unlinkSync(files.file.path)
  })
    
  ctx.response.body = {
    code: 0,
    msg: '切片上傳完成'
  }
})

2、分片合併請求：

/**
 * 1、判斷是否有切片hash資料夾
 * 2、判斷資料夾內的檔案數量是否等於total
 * 4、然後合併切片
 * 5、刪除切片檔案資訊
 */
router.post('/api/upload/merge', function uploadFile(ctx) {
  const { total, hash, name } = ctx.request.body
  const dirPath = path.join(uploadPath, hash, '/')
  const filePath = path.join(uploadPath, name) // 合併檔案

  // 已存在檔案，則表示已上傳成功，這裡邏輯判斷不考慮所有情況
  if (fs.existsSync(filePath)) {
    ctx.response.body = {
      code: 0,
      url: path.join('http://localhost:3000/uploads', name),
      msg: '檔案上傳成功'
    }
  // 如果沒有切片hash資料夾則表明上傳失敗，這裡邏輯判斷不考慮所有情況
  } else if (!fs.existsSync(dirPath)) {
    ctx.response.body = {
      code: -1,
      msg: '檔案上傳失敗'
    }
  } else {
    const chunks = fs.readdirSync(dirPath) // 讀取所有切片檔案
    fs.createWriteStream(filePath) // 建立可寫儲存檔案
    
    if(chunks.length !== total || !chunks.length) {
      ctx.response.body = {
        code: -1,
        msg: '上傳失敗，切片數量不符'
      }
    }

    for(let i = 0; i < chunks.length; i++) {
      // 將切片追加到儲存檔案
      fs.appendFileSync(filePath, fs.readFileSync(dirPath + hash + '-' + i))
      // 刪除切片
      fs.unlinkSync(dirPath + hash + '-' + i)
    }
    // 刪除切片資料夾
    fs.rmdirSync(dirPath)
    // 合併檔案成功
    ctx.response.body = {
      code: 0,
      url: path.join('http://localhost:3000/uploads', name),
      msg: '檔案上傳成功'
    }
  }
})

切片上傳成功與圖片合併截圖：

 

其它

1、前端暫停，續傳功能：

<template>
  <div id="app">
    <input type="file" @change="uploadFile">{{ precent }}%
    <button type="button" v-if="!isStop" @click="stopUpload">暫停</button>
    <button type="button" v-else @click="reupload">繼續上傳</button>
  </div>
</template>

2、js 新增主動暫停和續傳方法，比較簡單，這裡沒有做停止正在執行的請求：

stopUpload() {
  this.isStop = true
},
reupload() {
  this.isStop = false
  this.mergeRequest()
}

前端大檔案的分片上傳就差不多了。還可以優化的一點，在進行檔案 hash 求值的時候，大檔案的 hash 計算會比較慢，這裡可以加上 html5 的新特性，用 Web Worker 新開一個執行緒進行 hash 計算。

 

GitHub：https://github.com/554246839/file-upload

&n

相關推薦

nodeJs + js 大檔案分片上傳

簡單的檔案上傳 一、準備檔案上傳的條件： 1、安裝nodejs環境 2、安裝vue環境 3、驗證環境是否安裝成功 二、實現上傳步驟 1、前端部分使用 vue-cli 腳手架，搭建一個 demo 版本，能夠實現簡單互動： <template> <div id="app">

js實現大檔案分片上傳的方法

<input type="file" name="file" id="file"> <button id="upload" onClick="upload()">upload</button>var bytesPerPiece = 1024

Node + js實現大檔案分片上傳基本原理及實踐(一)

閱讀目錄 一：什麼是分片上傳？ 二：理解Blob物件中的slice方法對檔案進行分割及其他知識點 三. 使用 spark-md5 生成 md5檔案 四. 使用koa+js實現大檔案分片上傳實踐 回到頂部 一：什麼是分片上傳？ 分片上傳是把一個大的檔案分成若干塊，一塊一塊的傳輸。這

在瀏覽器進行大檔案分片上傳（java服務端實現）

最近在做web網盤的系統，網盤最基本的功能便是檔案上傳，但是檔案上傳當遇到大檔案的時候，在web端按傳統方式上傳簡直是災難，所以大檔案上傳可以採用分片上傳的辦法。其主要思路是：1.大檔案上傳時進行分片；2.分片上傳；3.對分片檔案進行合併。 思路比較清晰簡單，但一些問題在於：1.大檔案如何進

PHP大檔案分片上傳的實現方法

一、前言 在網站開發中，經常會有上傳檔案的需求，有的檔案size太大直接上傳，經常會導致上傳過程中耗時太久，大量佔用頻寬資源，因此有了分片上傳。 分片上傳主要是前端將一個較大的檔案分成等分的幾片，標識當前分片是第幾片和總共幾片，待所有的分片均上傳成功的時候，在後臺進行合成檔案即可。 二、

網頁內實現大檔案分片上傳、斷點續傳

最近做公司的專案，需要在後臺控制系統中新增一個功能-------向伺服器傳送程式更新包；這些程式更新包大小不固定，但基本都在1G到4G之間，剛開始還真是難倒我了，因為之前的專案中沒有上傳過這麼大的檔案，還要斷點續傳，後來經過查資料，寫DEMO，這個問題終於解決了； 解決辦法： 使用XMLHt

java springboot 大檔案分片上傳處理

這裡只寫後端的程式碼，基本的思想就是，前端將檔案分片，然後每次訪問上傳介面的時候，向後端傳入引數：當前為第幾塊問價，和分片總數 下面直接貼程式碼吧，一些難懂的我大部分都加上註釋了： 上傳檔案實體類： /** * 檔案傳輸物件 * @ApiModel和@ApiModelProperty及C

eggJS大檔案分片上傳與合併

前臺上傳使用vue+axios 前臺程式碼： // 計算分片總數 for (let i = 0; i < Math.ceil(this.file.size / this.uploadFragment.fragment); i++) { this.uploadFra

php大檔案分片上傳

HTML <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt

前段WebUploader；JavaEE大檔案分片上傳接收

Web大檔案分片上傳 Web環境中大檔案上傳不能再用form表單一次上傳了，這樣效率太低； 我在不斷嘗試SpringMVC環境下分片接受檔案，最終失敗；原因目測是 SpringMVC、Struts框架是不支援HTML5方式上傳的（這類框架只能支援Form表單

iOS大檔案分片上傳和斷點續傳

總結一下大檔案分片上傳和斷點續傳的問題。因為檔案過大（比如1G以上），必須要考慮上傳過程網路中斷的情況。http的網路請求中本身就已經具備了分片上傳功能，當傳輸的檔案比較大時，http協議自動會將檔案切片（分塊），但這不是我們現在說的重點，我們要做的事是保證在網路中斷後1G

Android 大檔案分片上傳斷點續傳任務管理實現

Transer 是一個傳輸框架,目前支援： - 支援 HTTP/HTTPS 斷點續傳下載 - 支援 HTTP/HTTPS 大檔案分片上傳 - 支援 類EventBus的task狀態變更通知，支援三種執行緒的訂閱模式 - 支援 任務分組，分使用者

webuploader在springMVC+jquery+Java開發環境下的大檔案分片上傳

參考的文章http://blog.csdn.net/new_sara/article/details/51604997 因為從網上看到的總是和自己專案開發有些許差別,所以也是在除錯了很久之後,發現適合自己專案的程式碼,現在把過程記錄下來,以便以後查閱. 注意: 1,web

.NET Core Web APi大檔案分片上傳研究

前言 前兩天發表利用FormData進行檔案上傳，然後有人問要是大檔案幾個G上傳怎麼搞，常見的不就是分片再搞下斷點續傳，動動手差不多也能搞出來，只不過要深入的話，考慮的東西還是很多。由於斷點續傳之前寫個幾篇，這裡試試利用FormData來進行分片上傳。 .NET Core Web APi檔案分片上傳 這裡我們

大檔案斷點上傳 js+php

/** js*/function PostFile(file, i, t) {    　　console.log(1);  　　var name = file.name, 　　//檔名 　　size = file.size, 　　type = file.type,

PHP大檔案分割上傳 PHP分片上傳

這篇文章主要為大家詳細介紹了PHP大檔案分割上傳，PHP分片上傳，具有一定的參考價值，感興趣的小夥伴們可以參考一下 服務端為什麼不能直接傳大檔案？跟php.ini裡面的幾個配置有關 upload_max_filesize = 2M //PHP最大能接受的檔案大小 post_max_siz

大文分片上傳 多執行緒上傳檔案（接收端）

package com.controller; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.io.RandomAccessFile; i

【轉】Android-使用Socket進行大檔案斷點上傳續傳

在Android中上傳檔案可以採用HTTP方式，也可以採用Socket方式，但是HTTP方式不能上傳大檔案，這裡介紹一種通過Socket方式來進行斷點續傳的方式，服務端會記錄下檔案的上傳進度，當某一次上傳過程意外終止後，下一次可以繼續上傳，這裡用到的其實還是J2SE裡的知識。 　　這個上傳程式的

WebUploader-----大檔案列表上傳

大家好   在這裡 給大家介紹一下款適用於大檔案傳輸的外掛--------------------WebUploader  首先呢 我先給出該外掛需要的引數文件   官網地址:http://fex.baidu.com/webuploader

【效能優化的祕密】Hadoop如何將TB級大檔案的上傳效能優化上百倍

往期文章1、 拜託！面試請不要再問我Spring Cloud底層原理2、 【雙11狂歡的背後】微服務註冊中心如何承載大型系統的千萬級訪問？3、 【效能優化之道】每秒上萬併發下的Spring Cloud引數優化實戰4、 微服務架構如何保障雙11狂歡下的99.99%