大文件分片上传
1、选择本地视频，获取视频实体
第一步：自动上传=' false : on-change=' video save tour '
埃尔-上传
行为
:自动上传='false '
:正在更改=' VideoSaveTour '
:接受='视频/* '
/El-上传
第二步：在videoSaveToUrl方法中获取视频实体，并存放在数据数据的这个视频中
videoSaveToUrl(活动){ 0
这个。视频=事件。生的；
}
2、单击"上传"按钮，触发分片上传方法
//引入上传附件方法
从" @/utils "导入{ uploadByPieces }；
processButtonClick(){ 0
上传附件({ 0
file: this.video，//视频实体
pieceSize: 5，//分片大小
成功：数据={ 0
console.log('分片上传视频成功');
},
错误： e={ 0
console.log('分片上传视频失败');
}
});
}
3、分片上传方法(utils.js代码中的上传附件方法)
第一步：获取分片上传过程中会使用到的变量
//上传过程中用到的变量
让文件MD5=''//总文件列表
常量块大小=块大小* 1024 * 1024//5MB一片
常量块计数=数学。天花板(文件。大小/块大小)//总片数
readFileMD5() //开始执行代码
第二步：readFileMD5方法：首先获取文件的讯息摘要5值，并通过网络请求uploadCheckAxios来检查是否之前已上传过该视频（每个文件的讯息摘要5值是唯一的),如果已经上传过，则后台直接返回视频在服务器上的网址，如果没有上传则进行分片上传，调用readChunkMD5()方法
const readfile MD5=()={ 0
//读取视频文件的讯息摘要5
console.log('获取文件的讯息摘要5值)
让文件重新索引=新文件阅读器()
文件重新定义。readasbinarystring(文件)
文件重定向实例。addeventlistener(' load '，e={
让fileBolb=e.target.result
文件MD5=md5(文件Bolb)
uploadCheckAxios({ 0
md5':文件讯息摘要5
}).然后(RES=}
if(RES .数据。代码==0){ 0
console.log('文件已被上传)
console.log(res.data)
成功成功
} else {
console.log('文件未被上传，将分片上传)
readChunkMD5()
}
}).catch ((e)=}
console.log('文件合并错误)
控制台。日志(e)
})
})
}
第三步：readChunkMD5()方法：分片并上传，其中上传块为上传方法
//针对每个文件进行矮胖的人或物处理
const readChunkMD5=()={ 0
//针对单个文件进行矮胖的人或物上传
for(var I=0；i chunkCountI){ 0
const { chunk }=getChunkInfo(文件，I，chunkSize)
console.log('总片数chunkCount)
console.log('分片后的数据-测试：‘我)
console.log(块)
uploadChunk({ chunk，currentChunk: i，chunkCount })
}
}
//getChunkInfo方法获取每片视频
const getChunkInfo=(文件，cu
rrentChunk, chunkSize) = {
let start = currentChunk * chunkSize
let end = Math.min(file.size, start + chunkSize)
let chunk = file.slice(start, end)
return { start, end, chunk }
}
第四步：uploadChunk方法：首先分片上传，上传完毕后调用后台合并接口
const uploadChunk = (chunkInfo) = {
let fetchForm = new FormData()
fetchForm.append('chunk', chunkInfo.currentChunk)
fetchForm.append('chunkSize', chunkSize)
fetchForm.append('chunks', chunkInfo.chunkCount)
fetchForm.append('file', chunkInfo.chunk)
fetchForm.append('md5', fileMD5)
fetchForm.append('name', file.name)
uploadVideoChunkAxios(fetchForm).then(res = {
console.log("分片上传返回信息：")
console.log(res.data)
if (res.data.code == 0) {
if (chunkInfo.currentChunk chunkInfo.chunkCount - 1) {
console.log("文件分片上传成功")
} else {
// 当总数大于等于分片个数的时候
if (chunkInfo.currentChunk = chunkInfo.chunkCount - 1) {
console.log("文件开始------合并成功")
//调用合并接口，传参为视频文件的额MD5值以及名字
mergeFileAxios({
"md5": fileMD5,
"name": file.name
}).then(res = {
if (res.data.code == 0) {
success success(res)
console.log("文件合并成功")
console.log(res.data.data.url)
} else {
console.log(res.data.msg)
}
}).catch((e) = {
console.log("文件合并错误")
console.log(e)
})
}
}
} else {
console.log(res.data.msg)
}
}).catch((e) = {
error error(e)
})
}
4、utils.js的完整代码
import md5 from 'js-md5'
import {
uploadVideoChunkAxios,
mergeFileAxios,
uploadCheckAxios
} from '@/api/upload'
export const uploadByPieces = ({
file,
pieceSize = 2,
progress,
success,
error
}) = {
// if (!file || !file.length) return
// 上传过程中用到的变量
let fileMD5 = '' // 总文件列表
const chunkSize = pieceSize * 1024 * 1024 // 5MB一片
const chunkCount = Math.ceil(file.size / chunkSize) // 总片数
// 获取md5
const readFileMD5 = () = {
// 读取视频文件的md5
console.log("获取文件的MD5值")
let fileRederInstance = new FileReader()
fileRederInstance.readAsBinaryString(file)
fileRederInstance.addEventListener('load', e = {
let fileBolb = e.target.result
fileMD5 = md5(fileBolb)
uploadCheckAxios({
"md5": fileMD5
}).then(res = {
if (res.data.code == 0) {
console.log("文件已被上传")
console.log(res.data)
success success(res)
} else {
console.log("文件未被上传，将分片上传")
readChunkMD5()
}
}).catch((e) = {
console.log("文件合并错误")
console.log(e)
})
})
}
const getChunkInfo = (file, currentChunk, chunkSize) = {
let start = currentChunk * chunkSize
let end = Math.min(file.size, start + chunkSize)
let chunk = file.slice(start, end)
return {
start,
end,
chunk
}
}
// 针对每个文件进行chunk处理
const readChunkMD5 = () = {
// 针对单个文件进行chunk上传
for (var i = 0; i chunkCount; i++) {
const {
chunk
} = getChunkInfo(file, i, chunkSize)
console.log("总片数" + chunkCount)
console.log("分片后的数据---测试：" + i)
console.log(chunk)
uploadChunk({
chunk,
currentChunk: i,
chunkCount
})
}
}
const uploadChunk = (chunkInfo) = {
// progressFun()
let fetchForm = new FormData()
fetchForm.append('chunk', chunkInfo.currentChunk)
fetchForm.append('chunkSize', chunkSize)
fetchForm.append('chunks', chunkInfo.chunkCount)
fetchForm.append('file', chunkInfo.chunk)
fetchForm.append('md5', fileMD5)
fetchForm.append('name', file.name)
uploadVideoChunkAxios(fetchForm).then(res = {
console.log("分片上传返回信息：")
console.log(res.data)
if (res.data.code == 0) {
// success success(res)
if (chunkInfo.currentChunk chunkInfo.chunkCount - 1) {
console.log("分片上传成功")
} else {
// 当总数大于等于分片个数的时候
if (chunkInfo.currentChunk = chunkInfo.chunkCount - 1) {
console.log("文件开始------合并成功")
mergeFileAxios({
"md5": fileMD5,
"name": file.name
}).then(res = {
if (res.data.code == 0) {
success success(res)
console.log("文件合并成功")
console.log(res.data.data.url)
} else {
console.log(res.data.msg)
}
}).catch((e) = {
console.log("文件合并错误")
console.log(e)
})
}
}
} else {
console.log(res.data.msg)
}
}).catch((e) = {
error error(e)
})
}
readFileMD5() // 开始执行代码
}
说明
uploadVideoChunkAxios 是上传分片视频的接口
mergeFileAxios 是合并的接口
uploadCheckAxios 来检查是否之前已上传过该视频
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/151774.html