1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import md5, { arrayBuffer } from "js-md5"; //引入MD5加密
import { API } from "@/axios/api"; // 这里指前端调用接口的api方法
export const uploadByPieces = ({
randoms,
file,
pieceSize = 10,
progress,
dataId,
success,
error
}) => {
// 如果文件传入为空直接 return 返回
// if (!file || !file.length) return;
console.log(file);
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();
console.log("file", file);
fileRederInstance.readAsBinaryString(file);
fileRederInstance.addEventListener("load", (e) => {
let fileBolb = e.target.result;
fileMD5 = md5(fileBolb);
// console.log("fileMD5", fileMD5);
// console.log("文件未被上传，将分片上传");
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 = () => {
// 针对单个文件进行chunk上传
let arr = [];
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, arr });
}
};
const uploadChunk = (chunkInfo) => {
// progressFun()
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
// 创建formData对象，下面是结合不同项目给后端传入的对象。
let fetchForm = new FormData();
fetchForm.append("identifier", randoms);
fetchForm.append("chunkNumber", chunkInfo.currentChunk + 1);
fetchForm.append("chunkSize", chunkSize);
fetchForm.append("currentChunkSize", chunkInfo.chunk.size);
fetchForm.append("file", chunkInfo.chunk);
fetchForm.append("filename", file.name);
fetchForm.append("totalChunks", chunkInfo.chunkCount);
fetchForm.append("totalSize", chunkSize);
fetchForm.append("dataId", dataId);
// fetchForm.append('md5', fileMD5)
API.fileUpload(fetchForm, config)
.then((res) => {
// console.log("分片上传返回信息：" + JSON.stringify(res));
// console.log(chunkInfo);
chunkInfo.arr.push(chunkInfo.currentChunk);
// console.log(chunkInfo.arr);
if (res.code == 1) {
// 结合不同项目 将成功的信息返回出去，这里可变的是指 res.data[0]
if (chunkInfo.arr.length == chunkInfo.chunkCount) {
success({
videoName: file.name
});
}
// 下面如果在项目中没有用到可以不用打开注释
console.log(chunkInfo);
if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {
console.log("分片上传成功");
} else {
// 当总数大于等于分片个数的时候
if (chunkInfo.currentChunk + 1 == chunkInfo.chunkCount) {
console.log("文件开始------合并成功");
}
}
} else {
console.log(res.message);
error();
}
})
.catch((e) => {
error && error(e);
});
};
readFileMD5(); // 开始执行代码
};