Vue 大檔案上傳和斷點續傳的實現
阿新 • • 發佈：2021-06-29
檔案上傳的 2 套方案
基於檔案流（form-data）
element-ui 框架的上傳元件，就是預設基於檔案流的。
- 資料格式：form-data；
- 傳遞的資料： file 檔案流資訊；filename 檔名字
客戶端把檔案轉換為 base64
通過 fileRead.readAsDataURL(file) 轉為 base64 字串後，要用 encodeURIComponent 編譯再發送， 傳送的資料經由 qs.stringify 處理，請求頭新增 "Content-Type": "application/x-www-form-urlencoded"
大檔案上傳
首先借助 element-ui 搭建下頁面。因為要自定義一個上傳的實現，所以 el-upload 元件的 auto-upload 要設定為 false；action 為必選引數，此處可以不填值。
<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>點選上傳</em></div>
<div class="el-upload__tip" slot="tip">大小不超過 200M 的視訊</div>
</el-upload>
<!-- 進度顯示 -->
<div class="progress-box">
<span>上傳進度：{{ 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>
獲取到檔案物件並轉成 ArrayBuffer 物件
轉成 ArrayBuffer 是因為後面要用 SparkMD5 這個庫生成 hash 值，對檔案進行命名
async handleChange(file) {
const fileObj = file.raw
try{
const buffer = await this.fileToBuffer(fileObj)
console.log(buffer)
}catch(e){
console.log(e)
}
}
列印 buffer 結果如下圖
注意：before-upload 函式和 on-change 函式的引數都有 file，但是 on-change 中的 file 不是 File 物件，要獲取File 物件需要通過fYXOdMsvIt
// 將 File 物件轉為 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('轉換檔案格式發生錯誤'))
}
})
}
建立切片
可以通過固定大小或是固定數量把一個檔案分成好幾個部分，為了避免由於 使用的 IEEE754 二進位制浮點數算術標準可能導致的誤差，我決定用固定大小的方式對檔案進行切割，設定每個切片的大小為 2M，即 2M = 21024KB = 21024*1024B = 2097152B。切割檔案用到的是 Blob.slice()
// 將檔案按固定大小（2M）進行切片，注意此處同時聲明瞭多個常量
const chunkSize = 2097152,chunkList = [],// 儲存所有切片的陣列
chunkListLength = Math.ceil(fileObj.size / chunkSize),// 計算總共多個切片
suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 檔案字尾名
// 根據檔案內容生成 hash 值
const spark = new SparkMD5.ArrayBuffer()
spark.append(buffer)
const hash = spark.end()
// 生成切片，這裡後端要求傳遞的引數為位元組資料塊（chunk）和每個資料塊的檔名（fileName）
let curChunk = 0 // 切片時的初始位置
for (let i = 0; i < chunkListLength; i++) {
const item = {
chunk: fileObj.slice(curChunk,curChunk + chunkSize),fileName: `${hash}_${i}.${suffix}` // 檔名規則按照 hash_1.jpg 命名
}
curChunk += chunkSize
chunkList.push(item)
}
console.log(chunkList)
選擇一個檔案後將列印得到諸如下圖的結果
傳送請求
傳送請求可以是並行的或是序列的，這裡選擇序列傳送。每個切片都新建一個請求，為了能實現斷點續傳，我們將請求封裝到函式 fn 裡，用一個數組 requestList 來儲存請求集合，然後封裝一個 send 函式，用於請求傳送，這樣一旦按下暫停鍵，可以方便的終止上傳，程式碼如下：
sendRequest() {
const requestList = [] // 請求集合
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 // 改變進度
}
})
}
requestList.push(fn)
})
let i = 0 // 記錄傳送的請求個數
const send = async () => {
// if ('暫停') return
if (i >= requestList.length) {
// 傳送完畢
return
}
await requestList[i]()
i++
send()
}
send() // 傳送請求
},
axios 部分也可以直接寫成下面這種形式：
axios.post('/single3',formData,{
headers: { 'Content-Type': 'multipart/form-data' }
})
所有切片傳送成功後
根據後端介面需要再發送一個 get 請求並把檔案的 hash 值傳給伺服器，我們定義一個 complete 方法來實現，這裡假定傳送的為視訊檔案
const complete = () => {
axios({
url: '/merge',method: 'get',params: { hash: this.hash }
}).then(res => {
if (res.data.code === 0) { // 請求傳送成功
this.videoUrl = res.data.path
}
})
}
這樣就能在檔案傳送成功後在頁面瀏覽到傳送的視訊了。
斷點續傳
首先是暫停按鈕文字的處理，用了一個過濾器，如果 upload 值為 true 則顯示“暫停”，否則顯示“繼續”：
filters: {
btnTextFilter(val) {
return val ? '暫停' : '繼續'
}
}
當按下暫停按鈕，觸發 handleClickBtn 方法
handleClickBtn() {
this.upload = !this.upload
// 如果不暫停則繼續上傳
if (this.upload) this.sendRequest()
}
http://www.cppcns.com
在傳送切片的 send 方法的開頭新增 if (!this.upload) return，這樣只要 upload 這個變數為 false 就不會繼續上傳了。為了在暫停完後可以繼續傳送，需要在每次成功傳送一個切片後將這個切片從 chunkList 數組裡刪除 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>點選上傳</em></div>
<div class="el-upload__tip" slot="tip">大小不超過 200M 的視訊</div>
</el-uploadfYXOdMsvIt>
<!-- 進度顯示 -->
<div class="progress-box">
<span>上傳進度：{{ 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 ? '暫停' : '繼續'
}
},data() {
return {
percent: 0,videoUrl: '',upload: true,percentCount: 0
}
},methods: {
async handleChange(file) {
if (!file) return
this.percent = 0
this.videoUrl = ''
// 獲取檔案並轉成 ArrayBuffer 物件
const fileObj = file.raw
let buffer
try {
buffer = await this.fileToBuffer(fileObj)
} catch (e) {
console.log(e)
}
// 將檔案按固定大小（2M）進行切片，注意此處同時聲明瞭多個常量
const chunkSize = 2097152,// 儲存所有切片的陣列
chunkListLength = Math.ceil(fileObj.size / chunkSize),// 計算總共多個切片
suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 檔案字尾名
// 根據檔案內容生成 hash 值
const spark = new SparkMD5.ArrayBuffer()
spark.append(buffer)
const hash = spark.end()
// 生成切片，這裡後端要求傳遞的引數為位元組資料塊（chunk）和每個資料塊的檔名（fileName）
let curChunk = 0 // 切片時的初始位置
for (let i = 0; i < chunkListLength; i++) {
const item = {
chunk: fileObj.slice(curChunk,fileName: `${hash}_${i}.${suffix}` // 檔名規則按照 hash_1.jpg 命名
}
curChunk += chunkSize
chunkList.push(item)
}
this.chunkList = chunkList // sendRequest 要用到
this.hash = hash // sendRequest 要用到
this.sendRequest()
},// 傳送請求
sendRequest() {
const requestList = [] // 請求集合
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',data: formData
}).then(res => {
if (res.data.code === 0) { // 成功
if (this.percentCount === 0) { // 避免上傳成功後會刪除切片改變 chunkList 的長度影響到 percentCount 的值
this.percentCount = 100 / this.chunkList.length
}
this.percent += this.percentCount // 改變進度
this.chunkList.splice(index,1) // 一旦上傳成功就刪除這一個 chunk，方便斷點續傳
}
})
}
requestList.push(fn)
})
let i = 0 // 記錄傳送的請求個數
// 檔案切片全部發送完畢後，需要請求 '/merge' 介面，把檔案的 hash 傳遞給伺服器
const complete = () => {
axios({
url: '/merge',params: { hash: this.hash }
}).then(res => {
if (res.data.code === 0) { // 請求傳送成功
this.videoUrl = res.data.path
}
})
}
const send = async () => {
if (!this.upload) return
if (i >= requestList.length) {
// 傳送完畢
complete()
return
}
await requestList[i]()
i++
send()
}
send() // 傳送請求
},// 按下暫停按鈕
handleClickBtn() {
this.upload = !this.upload
// 如果不暫停則繼續上傳
if (this.upload) this.sendRequest()
},// 將 File 物件轉為 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('轉換檔案格式發生錯誤'))
}
})
}
}
}
</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>
效果如下圖：
One More Thing
FormData
這裡傳送資料用到了 FormData，如果編碼型別被設為 "multipart/form-data"，它會使用和表單一樣的格式。
FormData.append()
會新增一個新值到 FormData 物件內的一個已存在的鍵中，如果鍵不存在則會新增該鍵。該方法可以傳遞 3 fYXOdMsvIt個引數，formData.append(name,value,filename)，其中 filename 為可選引數，是傳給伺服器的檔名稱， 當一個 Blob 或 File 被作為第二個引數的時候， Blob 物件的預設檔名是 "blob"。 File 物件的預設檔名是該檔案的名稱。
到此這篇關於 大檔案上傳和斷點續傳的實現的文章就介紹到這了,更多相關Vue 大檔案上傳和斷點續傳內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！