最近项目中有个大文件上传需求，考虑到整个文件上传太大（最小的文件不低于2个G），选择使用切片上传这种方案，将整个文件切分成若干份上传。因为需要计算大量切片的md5值，比较耗时，所以这里用到了worker，（原因：js属于单线程，在一个任务未完成的时候，会阻塞页面的交互，使页面变得卡顿, 使用html5新特性web worker，可以开启一个新线程，用来进行大量耗时的计算操作，且不会阻塞主线程。），下面说说整个流程的逻辑。
- 调用服务端的check接口，检测之前是否存在此文件，存在的话就直接返回成功，实现秒传的功能。若有部分已上传的切片，会将这些切片的MD5用一个数组返回来，前端将这些已上传过的切片MD5过滤掉，只上传没有传过的切片，实现续传的功能。
- 文件上传，生成整个文件的MD5值，文件的MD5用来实现文件秒传的功能。
- 文件切片，为每个切片生成一个MD5值，切片的MD5用来实现续传的功能。
- 切片上传
安装worker-loader
项目是用脚手架创建的，这里安装一个worker-loader。
npm i worker-loader
vue.config.js配置
配置worker-loader
chainWebpack: (config) => {
config.module
.rule('worker')
.test(/\.worker\.js$/) // 匹配文件名为xxx.worker.js的文件
.use('worker-loader')
.loader('worker-loader')
.end()
config.module.rule('js').exclude.add(/\.worker\.js$/)
},
创建worker文件
创建一个js文件，我这里叫webworker.worker.js。生成文件的md5值需要用到一个spark-md5.min.js库，worker文件里面的引入需要用importScripts，路径必须是文件的根目录，所以在根目录public文件夹下创建一个spark.js，将spark-md5.min.js里面的代码复制过来即可。
代码如下：
importScripts('/spark.js')
// 生成md5
function createFileMd5 (file) {
const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
if(!blobSlice) {
// 浏览器不兼容处理
return ''
}
let chunkSize = 1 * 1024 * 1024, // 分割文件大小为1MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
fileReader = new FileReader()
return new Promise((resolve)=> {
const now = new Date()
fileReader.onload = function (e) {
spark.append(e.target.result)
currentChunk++
if (currentChunk < chunks) {
loadNext()
} else {
const r = {
md5: spark.end(),
time: `${(new Date().getTime() - now) / 1000}s`,
}
resolve(r)
}
}
fileReader.onerror = function () {
resolve(null)
}
function loadNext () {
let start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
}
loadNext()
})
}
onmessage = async function (e) {
const data = e.data
const result = await createFileMd5(data.file)
postMessage(result) // 返回结果
}
文件上传逻辑
uploader.vue为文件上传的组件。具体代码如下：
<template>
<el-upload
class="upload-file"
:show-file-list="false"
:on-change="onChange"
:auto-upload="false"
ref="upload" action="#"
>
<div class="img-btn">
<el-button
style="height: 100px;"
slot="trigger"
size="small"
>
<i style="font-size: 14px;" class="el-icon-upload"></i>
<div class="fail" v-if="showUploadFail">文件上传失败，请重试</div>
<div v-else>选择文件</div>
</el-button>
</div>
</el-upload>
</template>
<script>
import {
shardCheck,
uploadShard
} from '@/api'
import MyWorker from './webworker.worker.js'
export default {
name: "uploader",
data () {
return {
chunkSize: 5 * 1024 * 1024,
worker: null,
showUploadFail: false,
}
},
destroyed () {
this.worker = null
},
methods:{
// 检测文件是否已存在
async checkFile (fileKey) {
return new Promise((resolve) => {
// shardCheck为服务端接口，检测文件
shardCheck({ fileKey })
.then(({ code, data }) => {
if (code === 0) {
resolve(data)
}
})
})
},
// 上传文件
async onChange (f) {
// 具体代码看下面.....
},
// web worker 计算md5
async calculateMd5Worker (file) {
return new Promise((resolve) => {
this.worker.postMessage({ file })
this.worker.onmessage = e => {
const md5 = e.data
if (md5) {
resolve(md5)
}
}
})
},
// 制作分片
createFileChunk (file, chunkSize) {
const chunks = []
let cur = 0
let index = 1 //
while(cur < file.size) {
chunks.push({
index,
file: file.slice(cur, cur + chunkSize),
})
cur += chunkSize
index++
}
return chunks
},
// 分片开始
async startCreateChunk (file, fileMd5, hadList) {
// 具体代码看下面
},
}
}
onChange事件里面代码逻辑，通过check文件状态，实现文件秒传功能
- 获取文件的MD5
- 调用服务端的check接口，检测文件是否存在，存在则直接返回成功，实现文件秒传功能
- 文件不存在或有部分切片已上传，执行切片上传逻辑
async onChange (f) {
this.worker = new MyWorker()
const file = f.raw
// 调用计算md5值的方法，获取md5以及时间
const { md5, time } = await this.calculateMd5Worker(file)
console.log(md5, '<-----md5------>用时：', time)
// 检测文件是否存在或者部分存在，此接口可以跟后端工程师沟通，定义返回的数据结构，filePath为文件路径，shardFiles为切片文件的数据，是个数组
const { filePath, shardFiles } = await this.checkFile(md5)
// 判断filePath存在，则文件无需上传，直接成功，实现文件秒传功能。
if (filePath) {
// 通知父级页面上传进度，此处和忽略。
this.$emit('upload', { progress: 100, tip: '上传进度' })
return false
} else {
// 将shardFiles返回的数据存放在list中，调用创建切片接口，进入切片上传逻辑。
let list = shardFiles || []
this.startCreateChunk(file, md5, list)
}
},
分片上传逻辑，实现文件续传功能
- 文件切片，得到切片总数
- 过滤掉服务端返回的切片数组，实现切片续传功能
- 判断切片完成：需要上传的切片数 + 已上传的切片数 === 切片总数，相等则执行上传逻辑
// 分片开始
async startCreateChunk (file, fileMd5, hadList) {
// 文件切片
const chunks = await this.createFileChunk(file, this.chunkSize)
const params = [] // 保存参数
const hadMd5s = hadList.map(val => val.fileKey) // 每个切片的md5
for (let i = 0; i < chunks.length; i++) {
const { md5: chunkMd5 } = await this.calculateMd5Worker(chunks[i].file)
// 如果存在此切片，则退出此次循环，开始下一轮循环
if (hadMd5s.includes(chunkMd5) {
continue
}
// 接口入参字段，
const formData = new FormData()
formData.append('fileName', file.name)
formData.append('fileKey', fileMd5)
formData.append('fileSize', file.size + '')
formData.append('shardFileKey', chunkMd5)
formData.append('shard', chunks[i].file)
formData.append('shardTotal', chunks.length)
formData.append('shardSize', chunks[i].file.size + '')
formData.append('shardIndex', chunks[i].index)
params.push(formData)
// 计算切片进度,可忽略
// this.md5Progress = Math.ceil(params.length / chunks.length * 100)
// this.$emit('shardMd5', { progress: Number(this.md5Progress), tip: '切片进度' })
}
// 判断需要上传的切片数组长度和已上传的切片数组长度是否和切片总和相等，相等则代表切片完成，可以进入上传的逻辑了。
if (params.length + hadMd5s.length === chunks.length) {
this.worker = null
// this.md5Progress = 100
// this.$emit('shardMd5', { progress: Number(this.md5Progress), tip: '切片进度' })
this.$nextTick(() => {
// 调用上传接口
this.uploadFile(params, chunks.length)
})
}
},
文件上传，串行上传或并发上传
-
串行上传：上一个切片上传完成后，才可以执行下一个切片上传
-
并发上传：这里控制的是每次并发6个切片上传。
uploadFile方法代码如下：
async uploadFile (params, total) {
// 串行
await this.serialRequest(params, total)
// 并行
// await this.concurrencyRequest(params, total)
},
uploadShard方法代码如下：
uploadShard (item, total) {
return new Promise((resolve) => {
// uploadShard为服务端接口
uploadShard(item)
.then(async ({ data, code }) => {
if (code === 0) {
// uploadCount 已上传的切片数量，用来计算上传进度，里面具体的逻辑这里就不啰嗦了
// 上传进度 = ((已上传数量 / 切片总数) * 100).toFixed(0)
// const { uploadCount } = data
resolve(true)
}
} else {
resolve(false)
}
})
.catch(err => {
resolve(false)
})
})
},
串行上传
async serialRequest (params, total) {
let item = params.shift()
while (item && !this.isCancelToken) {
// uploadShard 为分片上传的接口
let flag = await this.uploadShard(item, total)
if (flag) {
item = params.shift()
} else {
item = null
}
}
},
并行上传
- 获取第一个切片，先保证第一个切片上传成功，服务端根据上传文件的md5值写库操作，所以第一个切片是串行的。
- 利用while循环控制执行队列，保证每次上传6个切片。
// 并发请求 - 每次6个
async concurrencyRequest (params, total) {
// 现获取第一个切片，保证第一个切片上传成功
let item = params.shift()
let startIndex = 0
let endIndex = 6
let flag = await this.uploadShard(item, total)
let list = params.slice(startIndex, endIndex)
while (flag && startIndex < params.length) {
flag = await this.queueList(endIndex, list, total)
if (flag) {
startIndex += endIndex
list = params.slice(startIndex, startIndex + endIndex)
}
}
},
// 队列
queueList (endIndex, list, total) {
return new Promise(async (resolve) => {
const arr = []
// 控制循环的长度，最后几个切片可能不满6个，这里需要做个判断
const length = list.length < endIndex ? list.length : endIndex
for (let i = 0; i < length; i++) {
arr.push(this.uploadShard(list[i], total))
}
// 利用promise.all并发请求
Promise.all(arr)
.then(res => {
if (res.every(val => val === true)) {
resolve(true)
} else {
resolve(false)
}
})
.catch(() => {
resolve(false)
})
})
},
以上就是文件上传的所有逻辑了，若有不足之处请多多点评。
