Vue 大文件上傳和斷點(diǎn)續(xù)傳

文件上傳的 2 套方案

基于文件流(form-data)

element-ui 框架的上傳組件降铸,就是默認(rèn)基于文件流的续室。

  • 數(shù)據(jù)格式:form-data;
  • 傳遞的數(shù)據(jù): file 文件流信息虎敦;filename 文件名字
image.png

客戶端把文件轉(zhuǎn)換為 base64

通過 fileRead.readAsDataURL(file) 轉(zhuǎn)為 base64 字符串后,要用 encodeURIComponent 編譯再發(fā)送政敢, 發(fā)送的數(shù)據(jù)經(jīng)由 qs.stringify 處理其徙,請(qǐng)求頭添加 "Content-Type": "application/x-www-form-urlencoded"

大文件上傳

首先借助 element-ui 搭建下頁(yè)面。因?yàn)橐远x一個(gè)上傳的實(shí)現(xiàn)喷户,所以 el-upload 組件的 auto-upload 要設(shè)定為 false唾那;action 為必選參數(shù),此處可以不填值褪尝。

<template>
  <div id="app">
    <!-- 上傳組件 -->
    <el-upload action drag :auto-upload="false" :show-file-list="false" :on-change="handleChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">將文件拖到此處闹获,或<em>點(diǎn)擊上傳</em></div>
      <div class="el-upload__tip" slot="tip">大小不超過 200M 的視頻</div>
    </el-upload>

    <!-- 進(jìn)度顯示 -->
    <div class="progress-box">
      <span>上傳進(jìn)度:{{ percent.toFixed() }}%</span>
      <el-button type="primary" size="mini" @click="handleClickBtn">{{ upload | btnTextFilter}}</el-button>
    </div>

    <!-- 展示上傳成功的視頻 -->
    <div v-if="videoUrl">
      <video :src="videoUrl" controls />
    </div>
  </div>
</template>
復(fù)制代碼

獲取到文件對(duì)象并轉(zhuǎn)成 ArrayBuffer 對(duì)象

轉(zhuǎn)成 ArrayBuffer 是因?yàn)楹竺嬉?SparkMD5 這個(gè)庫(kù)生成 hash 值,對(duì)文件進(jìn)行命名

async handleChange(file) {
  const fileObj = file.raw
  try{
    const buffer = await this.fileToBuffer(fileObj)
    console.log(buffer)
  }catch(e){
    console.log(e)
  }
}
復(fù)制代碼

打印 buffer 結(jié)果如下圖


image (1).png

注意:before-upload 函數(shù)和 on-change 函數(shù)的參數(shù)都有 file河哑,但是 on-change 中的 file 不是 File 對(duì)象昌罩,要獲取File 對(duì)象需要通過 file.raw。 這里用到 FileReader 類將 File 對(duì)象轉(zhuǎn) ArrayBuffer 對(duì)象灾馒,因?yàn)槭钱惒竭^程茎用,所以用 Promise 封裝:

// 將 File 對(duì)象轉(zhuǎn)為 ArrayBuffer 
fileToBuffer(file) {
  return new Promise((resolve, reject) => {
    const fr = new FileReader()
    fr.onload = e => {
      resolve(e.target.result)
    }
    fr.readAsArrayBuffer(file)
    fr.onerror = () => {
      reject(new Error('轉(zhuǎn)換文件格式發(fā)生錯(cuò)誤'))
    }
  })
}
復(fù)制代碼

創(chuàng)建切片

可以通過固定大小或是固定數(shù)量把一個(gè)文件分成好幾個(gè)部分,為了避免由于 js 使用的 IEEE754 二進(jìn)制浮點(diǎn)數(shù)算術(shù)標(biāo)準(zhǔn)可能導(dǎo)致的誤差,我決定用固定大小的方式對(duì)文件進(jìn)行切割轨功,設(shè)定每個(gè)切片的大小為 2M旭斥,即 2M = 21024KB = 21024*1024B = 2097152B。切割文件用到的是 Blob.slice()

// 將文件按固定大泄沤А(2M)進(jìn)行切片垂券,注意此處同時(shí)聲明了多個(gè)常量
const chunkSize = 2097152,
  chunkList = [], // 保存所有切片的數(shù)組
  chunkListLength = Math.ceil(fileObj.size / chunkSize), // 計(jì)算總共多個(gè)切片
  suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后綴名

// 根據(jù)文件內(nèi)容生成 hash 值
const spark = new SparkMD5.ArrayBuffer()
spark.append(buffer)
const hash = spark.end()

// 生成切片,這里后端要求傳遞的參數(shù)為字節(jié)數(shù)據(jù)塊(chunk)和每個(gè)數(shù)據(jù)塊的文件名(fileName)
let curChunk = 0 // 切片時(shí)的初始位置
for (let i = 0; i < chunkListLength; i++) {
  const item = {
    chunk: fileObj.slice(curChunk, curChunk + chunkSize),
    fileName: `${hash}_${i}.${suffix}` // 文件名規(guī)則按照 hash_1.jpg 命名
  }
  curChunk += chunkSize
  chunkList.push(item)
}
console.log(chunkList)
復(fù)制代碼

選擇一個(gè)文件后將打印得到諸如下圖的結(jié)果

image (2).png

發(fā)送請(qǐng)求

發(fā)送請(qǐng)求可以是并行的或是串行的羡滑,這里選擇串行發(fā)送菇爪。每個(gè)切片都新建一個(gè)請(qǐng)求,為了能實(shí)現(xiàn)斷點(diǎn)續(xù)傳柒昏,我們將請(qǐng)求封裝到函數(shù) fn 里凳宙,用一個(gè)數(shù)組 requestList 來保存請(qǐng)求集合,然后封裝一個(gè) send 函數(shù)职祷,用于請(qǐng)求發(fā)送氏涩,這樣一旦按下暫停鍵,可以方便的終止上傳有梆,代碼如下:

sendRequest() {
  const requestList = [] // 請(qǐng)求集合
  this.chunkList.forEach(item => {
    const fn = () => {
      const formData = new FormData()
      formData.append('chunk', item.chunk)
      formData.append('filename', item.fileName)
      return axios({
        url: '/single3',
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        data: formData
      }).then(res => {
        if (res.data.code === 0) { // 成功
          if (this.percentCount === 0) {
            this.percentCount = 100 / this.chunkList.length
          }
          this.percent += this.percentCount // 改變進(jìn)度
        }
      })
    }
    requestList.push(fn)
  })

  let i = 0 // 記錄發(fā)送的請(qǐng)求個(gè)數(shù)
  const send = async () => {
    // if ('暫停') return
    if (i >= requestList.length) {
      // 發(fā)送完畢
      return
    } 
    await requestList[i]()
    i++
    send()
  }
  send() // 發(fā)送請(qǐng)求
},
復(fù)制代碼

axios 部分也可以直接寫成下面這種形式:

axios.post('/single3', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
})
復(fù)制代碼

所有切片發(fā)送成功后

根據(jù)后端接口需要再發(fā)送一個(gè) get 請(qǐng)求并把文件的 hash 值傳給服務(wù)器是尖,我們定義一個(gè) complete 方法來實(shí)現(xiàn),這里假定發(fā)送的為視頻文件

const complete = () => {
  axios({
    url: '/merge',
    method: 'get',
    params: { hash: this.hash }
  }).then(res => {
    if (res.data.code === 0) { // 請(qǐng)求發(fā)送成功
      this.videoUrl = res.data.path
    }
  })
}
復(fù)制代碼

這樣就能在文件發(fā)送成功后在頁(yè)面瀏覽到發(fā)送的視頻了泥耀。

斷點(diǎn)續(xù)傳

首先是暫停按鈕文字的處理饺汹,用了一個(gè)過濾器,如果 upload 值為 true 則顯示“暫吞荡撸”兜辞,否則顯示“繼續(xù)”:

filters: {
  btnTextFilter(val) {
    return val ? '暫停' : '繼續(xù)'
  }
}
復(fù)制代碼

當(dāng)按下暫停按鈕,觸發(fā) handleClickBtn 方法

handleClickBtn() {
  this.upload = !this.upload
  // 如果不暫停則繼續(xù)上傳
  if (this.upload) this.sendRequest()
}
復(fù)制代碼

在發(fā)送切片的 send 方法的開頭添加 if (!this.upload) return陨囊,這樣只要 upload 這個(gè)變量為 false 就不會(huì)繼續(xù)上傳了弦疮。為了在暫停完后可以繼續(xù)發(fā)送,需要在每次成功發(fā)送一個(gè)切片后將這個(gè)切片從 chunkList 數(shù)組里刪除 this.chunkList.splice(index, 1)

代碼匯總

<template>
  <div id="app">
    <!-- 上傳組件 -->
    <el-upload action drag :auto-upload="false" :show-file-list="false" :on-change="handleChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">將文件拖到此處蜘醋,或<em>點(diǎn)擊上傳</em></div>
      <div class="el-upload__tip" slot="tip">大小不超過 200M 的視頻</div>
    </el-upload>

    <!-- 進(jìn)度顯示 -->
    <div class="progress-box">
      <span>上傳進(jìn)度:{{ percent.toFixed() }}%</span>
      <el-button type="primary" size="mini" @click="handleClickBtn">{{ upload | btnTextFilter}}</el-button>
    </div>

    <!-- 展示上傳成功的視頻 -->
    <div v-if="videoUrl">
      <video :src="videoUrl" controls />
    </div>
  </div>
</template>

<script>
  import SparkMD5 from "spark-md5"
  import axios from "axios"

  export default {
    name: 'App3',
    filters: {
      btnTextFilter(val) {
        return val ? '暫停' : '繼續(xù)'
      }
    },
    data() {
      return {
        percent: 0,
        videoUrl: '',
        upload: true,
        percentCount: 0
      }
    },
    methods: {
      async handleChange(file) {
        if (!file) return
        this.percent = 0
        this.videoUrl = ''
        // 獲取文件并轉(zhuǎn)成 ArrayBuffer 對(duì)象
        const fileObj = file.raw
        let buffer
        try {
          buffer = await this.fileToBuffer(fileObj)
        } catch (e) {
          console.log(e)
        }

        // 將文件按固定大行踩(2M)進(jìn)行切片,注意此處同時(shí)聲明了多個(gè)常量
        const chunkSize = 2097152,
          chunkList = [], // 保存所有切片的數(shù)組
          chunkListLength = Math.ceil(fileObj.size / chunkSize), // 計(jì)算總共多個(gè)切片
          suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后綴名

        // 根據(jù)文件內(nèi)容生成 hash 值
        const spark = new SparkMD5.ArrayBuffer()
        spark.append(buffer)
        const hash = spark.end()

        // 生成切片压语,這里后端要求傳遞的參數(shù)為字節(jié)數(shù)據(jù)塊(chunk)和每個(gè)數(shù)據(jù)塊的文件名(fileName)
        let curChunk = 0 // 切片時(shí)的初始位置
        for (let i = 0; i < chunkListLength; i++) {
          const item = {
            chunk: fileObj.slice(curChunk, curChunk + chunkSize),
            fileName: `${hash}_${i}.${suffix}` // 文件名規(guī)則按照 hash_1.jpg 命名
          }
          curChunk += chunkSize
          chunkList.push(item)
        }
        this.chunkList = chunkList // sendRequest 要用到
        this.hash = hash // sendRequest 要用到
        this.sendRequest()
      },

      // 發(fā)送請(qǐng)求
      sendRequest() {
        const requestList = [] // 請(qǐng)求集合
        this.chunkList.forEach((item, index) => {
          const fn = () => {
            const formData = new FormData()
            formData.append('chunk', item.chunk)
            formData.append('filename', item.fileName)
            return axios({
              url: '/single3',
              method: 'post',
              headers: { 'Content-Type': 'multipart/form-data' },
              data: formData
            }).then(res => {
              if (res.data.code === 0) { // 成功
                if (this.percentCount === 0) { // 避免上傳成功后會(huì)刪除切片改變 chunkList 的長(zhǎng)度影響到 percentCount 的值
                  this.percentCount = 100 / this.chunkList.length
                }
                this.percent += this.percentCount // 改變進(jìn)度
                this.chunkList.splice(index, 1) // 一旦上傳成功就刪除這一個(gè) chunk啸罢,方便斷點(diǎn)續(xù)傳
              }
            })
          }
          requestList.push(fn)
        })

        let i = 0 // 記錄發(fā)送的請(qǐng)求個(gè)數(shù)
        // 文件切片全部發(fā)送完畢后,需要請(qǐng)求 '/merge' 接口胎食,把文件的 hash 傳遞給服務(wù)器
        const complete = () => {
          axios({
            url: '/merge',
            method: 'get',
            params: { hash: this.hash }
          }).then(res => {
            if (res.data.code === 0) { // 請(qǐng)求發(fā)送成功
              this.videoUrl = res.data.path
            }
          })
        }
        const send = async () => {
          if (!this.upload) return
          if (i >= requestList.length) {
            // 發(fā)送完畢
            complete()
            return
          } 
          await requestList[i]()
          i++
          send()
        }
        send() // 發(fā)送請(qǐng)求
      },

      // 按下暫停按鈕
      handleClickBtn() {
        this.upload = !this.upload
        // 如果不暫停則繼續(xù)上傳
        if (this.upload) this.sendRequest()
      },

      // 將 File 對(duì)象轉(zhuǎn)為 ArrayBuffer 
      fileToBuffer(file) {
        return new Promise((resolve, reject) => {
          const fr = new FileReader()
          fr.onload = e => {
            resolve(e.target.result)
          }
          fr.readAsArrayBuffer(file)
          fr.onerror = () => {
            reject(new Error('轉(zhuǎn)換文件格式發(fā)生錯(cuò)誤'))
          }
        })
      }
    }
  }
</script>

<style scoped>
  .progress-box {
    box-sizing: border-box;
    width: 360px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 8px 10px;
    background-color: #ecf5ff;
    font-size: 14px;
    border-radius: 4px;
  }
</style>
復(fù)制代碼

效果如下圖:

GIF 2021-6-19 15-31-43.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末扰才,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子厕怜,更是在濱河造成了極大的恐慌衩匣,老刑警劉巖蕾总,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異琅捏,居然都是意外死亡生百,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門柄延,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蚀浆,“玉大人,你說我怎么就攤上這事搜吧∈锌。” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵滤奈,是天一觀的道長(zhǎng)摆昧。 經(jīng)常有香客問我,道長(zhǎng)僵刮,這世上最難降的妖魔是什么据忘? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任鹦牛,我火速辦了婚禮搞糕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘曼追。我一直安慰自己窍仰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布礼殊。 她就那樣靜靜地躺著驹吮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪晶伦。 梳的紋絲不亂的頭發(fā)上碟狞,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音婚陪,去河邊找鬼族沃。 笑死,一個(gè)胖子當(dāng)著我的面吹牛泌参,可吹牛的內(nèi)容都是我干的脆淹。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼沽一,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼盖溺!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起铣缠,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤烘嘱,失蹤者是張志新(化名)和其女友劉穎昆禽,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蝇庭,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡为狸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了遗契。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辐棒。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖牍蜂,靈堂內(nèi)的尸體忽然破棺而出漾根,到底是詐尸還是另有隱情,我是刑警寧澤鲫竞,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布辐怕,位于F島的核電站,受9級(jí)特大地震影響从绘,放射性物質(zhì)發(fā)生泄漏寄疏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一僵井、第九天 我趴在偏房一處隱蔽的房頂上張望陕截。 院中可真熱鬧,春花似錦批什、人聲如沸农曲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)乳规。三九已至,卻和暖如春合呐,著一層夾襖步出監(jiān)牢的瞬間暮的,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工淌实, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留冻辩,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓翩伪,卻偏偏與公主長(zhǎng)得像微猖,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子缘屹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361