78 lines
3.6 KiB
JavaScript
78 lines
3.6 KiB
JavaScript
import md5 from 'js-md5' //引入MD5加密
|
||
import { upload } from '@/api/upload.js' // 这里指前端调用接口的api方法
|
||
export const uploadByPieces = ({ randoms, file, pieceSize = 2, pid, progress, success, error, uploading }) => {
|
||
// 如果文件传入为空直接 return 返回
|
||
if (!file) return
|
||
let fileMD5 = ''// 总文件列表
|
||
const chunkSize = pieceSize * 1024 * 1024 // 5MB一片
|
||
const chunkCount = Math.ceil(file.size / chunkSize) // 总片数
|
||
// 获取md5
|
||
const readFileMD5 = () => {
|
||
// 读取视频文件的md5
|
||
let fileRederInstance = new FileReader()
|
||
fileRederInstance.readAsBinaryString(file)
|
||
fileRederInstance.addEventListener('load', e => {
|
||
let fileBolb = e.target.result
|
||
fileMD5 = md5(fileBolb)
|
||
readChunkMD5()
|
||
})
|
||
}
|
||
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 = async () => {
|
||
// 针对单个文件进行chunk上传
|
||
for (var i = 0; i < chunkCount; i++) {
|
||
const { chunk } = getChunkInfo(file, i, chunkSize)
|
||
console.log("总片数" + chunkCount)
|
||
console.log("分片后的数据---测试：" + i)
|
||
await uploadChunk({ chunk, currentChunk: i, chunkCount })
|
||
}
|
||
}
|
||
const uploadChunk = (chunkInfo) => {
|
||
// progressFun()
|
||
return new Promise((resolver, reject) => {
|
||
let config = {
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data'
|
||
}
|
||
}
|
||
// 创建formData对象，下面是结合不同项目给后端传入的对象。
|
||
let fetchForm = new FormData()
|
||
fetchForm.append('chunkNumber', chunkInfo.currentChunk + 1) // 第几片
|
||
fetchForm.append('chunkSize', chunkSize) // 分片大小的限制 例如限制 5M
|
||
fetchForm.append('currentChunkSize', chunkInfo.chunk.size) // 每一片的大小
|
||
fetchForm.append('file', chunkInfo.chunk) //每一片的文件
|
||
fetchForm.append('filename', file.name) // 文件名
|
||
fetchForm.append('totalChunks', chunkInfo.chunkCount) //总片数
|
||
fetchForm.append('md5', fileMD5)
|
||
fetchForm.append('pid', pid) //附件视频上传分类
|
||
upload(fetchForm, config).then(res => {
|
||
console.log("分片上传返回信息：", res)
|
||
if (res.data.code == 1) {
|
||
// // 结合不同项目 将成功的信息返回出去
|
||
// 下面如果在项目中没有用到可以不用打开注释
|
||
uploading(chunkInfo.currentChunk + 1, chunkInfo.chunkCount)
|
||
resolver(true)
|
||
} else if (res.data.code == 2) {
|
||
if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {
|
||
console.log("分片上传成功")
|
||
} else {
|
||
// 当总数大于等于分片个数的时候
|
||
if ((chunkInfo.currentChunk + 1) == chunkInfo.chunkCount) {
|
||
console.log("文件开始------合并成功")
|
||
success(res.data)
|
||
}
|
||
}
|
||
}
|
||
}).catch((e) => {
|
||
error && error(e)
|
||
})
|
||
})
|
||
}
|
||
readFileMD5() // 开始执行代码
|
||
} |