前端大文件分片MinIO上传的详细代码

余华明 · 发表于 2024-9-12 09:40:01

大文件分片上传是一种将大文件拆分成多个小文件片段进行上传的技术。这种方式可以提高上传效率，减少网络传输时间，并且在网络不稳定或者上传过程中出现错误时，可以更容易地恢复上传进度。

大文件分片上传的步骤如下：

将大文件分成多个固定大小的片段，通常每个片段的大小在几十KB到几MB之间。
逐个上传每个文件片段，可以使用HTTP、FTP等协议进行传输。
服务器接收到每个文件片段后，判断其MD5值进行保存或者合并操作。
在上传过程中，通过MD5值维护一个上传进度记录，标记已经上传成功的文件片段，以便在上传中断后能够恢复上传进度。
当所有文件片段都上传完成后，服务器将文件片段进行合并，得到完整的大文件。

大文件分片上传的好处有：

提高上传速度：将大文件拆分成小片段，可以同时上传多个片段，从而提高上传速度。
断点续传：如果在上传过程中发生中断或者错误，可以根据上传进度记录，只重新上传丢失或者出错的文件片段，从而减少网络传输时间。
易于管理：将大文件拆分成小片段，可以更方便地管理和存储，避免了一次性上传整个大文件可能导致的内存占用问题。

大文件分片上传技术已经广泛应用于各种云存储、文件传输等领域，为用户提供了更好的上传体验和效率。

视图代码

大文件分片需要读取时间所以要给加载状态，下面例子只适合单文件上传且带上传进度展示

<template>
<div class="slice-upload" v-loading="loading" element-loading-text="文件分片读取中"
element-loading-spinner="el-icon-loading">
<form id="fromCont" method="post" style="display: inline-block">
<el-button size="small" @click="inputChange" class="file-choose-btn" :disabled="uploading">
选择文件
<input v-show="false" id="file" ref="fileValue" :accept="accept" type="file" @change="choseFile" />
</el-button>
</form>
<slot name="status"></slot>
<div class="el-upload__tip">
请上传不超过 <span style="color: #e6a23c">{{ maxCalc }}</span> 的文件
</div>
<div class="file-list">
<transition name="list" tag="p">
<div v-if="file" class="list-item">
<i class="el-icon-document mr5"></i>
<span>{{ file.name }}
<em v-show="uploading" style="color: #67c23a">上传中....</em></span>
<span class="percentage">{{ percentage }}%</span>
<el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />
</div>
</transition>
</div>
</div>
</template>

复制代码

逻辑代码

需要引入Md5

npm install spark-md5

复制代码

<script>
import SparkMD5 from "spark-md5";
import axios from "axios";
import {
getImagecheckFile,//检验是否上传过用于断点续传
Imageinit,//用分片换取minIo上传地址
Imagecomplete,//合并分片
} from "/*接口地址*/";
export default {
name: "sliceUpload",
/**
* 外部数据
* @type {Object}
*/
props: {
/**
* @Description
* 代码注释说明
* 接口url
* @Return
*/
findFileUrl: String,
continueUrl: String,
finishUrl: String,
removeUrl: String,
/**
* @Description
* 代码注释说明
* 最大上传文件大小 100G
* @Return
*/
maxFileSize: {
type: Number,
default: 100 * 1024 * 1024 * 1024,
},
/**
* @Description
* 代码注释说明
* 切片大小
* @Return
*/
sliceSize: {
type: Number,
default: 50 * 1024 * 1024,
},
/**
* @Description
* 代码注释说明
* 是否可以上传
* @Return
*/
show: {
type: Boolean,
default: true,
},
accept: String,
},
/**
* 数据定义
* @type {Object}
*/
data() {
return {
/**
* @Description
* 代码注释说明
* 文件
* @Return
*/
file: null,//源文件
imageSize: 0,//文件大小单位GB
uploadId: "",//上传id
fullPath: "",//上传地址
uploadUrls: [],//分片上传地址集合
hash: "",//文件MD5
/**
* @Description
* 代码注释说明
* 分片文件
* @Return
*/
formDataList: [],
/**
* @Description
* 代码注释说明
* 未上传分片
* @Return
*/
waitUpLoad: [],
/**
* @Description
* 代码注释说明
* 未上传个数
* @Return
*/
waitNum: NaN,
/**
* @Description
* 代码注释说明
* 上传大小限制
* @Return
*/
limitFileSize: false,
/**
* @Description
* 代码注释说明
* 进度条
* @Return
*/
percentage: 0,
percentageFlage: false,
/**
* @Description
* 代码注释说明
* 读取loading
* @Return
*/
loading: false,
/**
* @Description
* 代码注释说明
* 正在上传中
* @Return
*/
uploading: false,
/**
* @Description
* 代码注释说明
* 暂停上传
* @Return
*/
stoped: false,
/**
* @Description
* 代码注释说明
* 上传后的文件数据
* @Return
*/
fileData: {
id: "",
path: "",
},
};
},
/**
* 数据监听
* @type {Object}
*/
watch: {
//监控上传进度
waitNum: {
handler(v, oldVal) {
let p = Math.floor(
((this.formDataList.length - v) / this.formDataList.length) * 100
);
// debugger;
this.percentage = p > 100 ? 100 : p;
},
deep: true,
},
show: {
handler(v, oldVal) {
if (!v) {
this.file = null
}
},
deep: true,
},
},
/**
* 方法集合
* @type {Object}
*/
methods: {
/**
* 代码注释说明
* 内存过滤器
* @param {[type]} ram [description]
* @return {[type]} [description]
*/
ramFilter(bytes) {
if (bytes === 0) return "0";
var k = 1024;
let sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
let i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
},
/**
* 触发上传文件处理
* @param e
*/
async choseFile(e) {
const fileInput = e.target.files[0]; // 获取当前文件
this.imageSize = this.ramFilter(fileInput.size);//记录文件大小
if (!fileInput && !this.show) {
return;
}
const pattern = /[\u4e00-\u9fa5]/;
if (pattern.test(fileInput?.name)) {
this.$message.warning("请不要上传带有中文名称的镜像文件！");
return;
}
this.file = fileInput; // file 丢全局方便后面用可以改进为func传参形式
this.percentage = 0;
if (this.file.size < this.maxFileSize) {
this.loading = true;
const FileSliceCap = this.sliceSize; // 分片字节数
let start = 0; // 定义分片开始切的地方
let end = 0; // 每片结束切的地方a
let i = 0; // 第几片
this.formDataList = []; // 分片存储的一个池子丢全局
this.waitUpLoad = []; // 分片存储的一个池子丢全局
while (end < this.file.size && this.show) {
/**
* @Description
* 代码注释说明
* 当结尾数字大于文件总size的时候结束切片
* @Return
*/
start = i * FileSliceCap; // 计算每片开始位置
end = (i + 1) * FileSliceCap; // 计算每片结束位置
var fileSlice = this.file.slice(start, end); // 开始切 file.slice 为 h5方法对文件切片参数为起止字节数
const formData = new window.FormData(); // 创建FormData用于存储传给后端的信息
// formData.append('fileMd5', this.fileMd5) // 存储总文件的Md5 让后端知道自己是谁的切片
formData.append("file", fileSlice); // 当前的切片
formData.append("chunkNumber", i); // 当前是第几片
formData.append("fileName", this.file.name); // 当前文件的文件名用于后端文件切片的命名 formData.appen 为 formData对象添加参数的方法
this.formDataList.push({ key: i, formData }); // 把当前切片信息自己是第几片存入我们方才准备好的池子
i++;
}
//获取文件的MD5值
this.computeFileMD5(this.file, FileSliceCap).then(
(res) => {
if (res) {
this.hash = res;
//console.log("拿到了：", res);
// this.UploadStatus = `文件读取成功（${res}），文件上传中...`;
//通过Md5值查询是否上传过
getImagecheckFile({ fileCode: res }).then(
(res2) => {
this.loading = false;
/**
* @Description
* 代码注释说明
* 全部切完以后发一个请求给后端拉当前文件后台存储的切片信息用于检测有多少上传成功的切片
* fileUrl：有地址就是秒传因为已经存在该文件了
* shardingIndex：返回哪些已经上传用于断点续传
* @Return
*/
let { fileUrl, shardingIndex } = res2.data.data; //检测是否上传过
if (!fileUrl) {
/**
* @Description
* 代码注释说明
* 当是断点续传时候
* 记得处理一下当前是默认全都没上传过暂不支持断点续传后端无法返回已上传数据如果你家后端牛一点可以在此处理断点续传
* @Return
*/
this.waitUpLoad = this.formDataList;//当前是默认全都没上传过断点续传需处理
this.getFile()
} else {
// debugger;
this.formDataList = [{ key: fileUrl }];
this.waitNum = 1;
this.waitUpLoad = []; // 秒传则没有需要上传的切片
this.$message.success("文件已秒传");
this.$emit("fileinput", {
url: fileUrl,
code: this.hash,
imageSize: this.imageSize,
});
this.waitNum = 0;
// this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.loading = false;
return;
}
this.waitNum = this.waitUpLoad.length; // 记录长度用于百分比展示
},
(err) => {
this.$message.error("获取文件数据失败");
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.loading = false;
return;
}
);
} else {
// this.UploadStatus = "文件读取失败";
}
},
(err) => {
// this.UploadStatus = "文件读取失败";
this.uploading = false;
this.loading = false;
this.$message.error("文件读取失败");
}
);
} else {
//this.limitFileSize = true;
this.$message.error("请上传小于100G的文件");
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
}
},
//准备上传
getFile() {
/**
* @Description
* 代码注释说明
* 确定按钮
* @Return
*/
if (this.file === null) {
this.$message.error("请先上传文件");
return;
}
this.percentageFlage = this.percentage == 100;
this.sliceFile(); // 上传切片
},
async sliceFile() {
/**
* @Description
* 代码注释说明
* 如果已上传文件且生成了文件路径
* @Return
*/
if (this.fileData.path) {
return;
}
/**
* @Description
* 代码注释说明
* 如果是切片已全部上传但还未完成合并及移除chunk操作没有生成文件路径时
* @Return
*/
if (this.percentageFlage && !this.fileData.path) {
this.finishUpload();
return;
}
this.uploading = true;
this.stoped = false;
//提交切片
this.upLoadFileSlice();
},
async upLoadFileSlice() {
if (this.stoped) {
this.uploading = false;
return;
}
/**
* @Description
* 代码注释说明
* 剩余切片数为0时调用结束上传接口
* @Return
*/
try {
let suffix = /\.([0-9A-z]+)$/.exec(this.file.name)[1]; // 文件后缀名也就是文件类型
let data = {
bucketName: "static",//桶的名字
contentType: this.file.type || suffix,//文件类型
filename: this.file.name,//文件名字
partCount: this.waitUpLoad.length,//分片多少也就是分了多少个
};
//根据分片长度获取分片上传地址以及上传ID和文件地址
Imageinit(data).then((res) => {
if (res.data.code == 200 && res.data.data) {
this.uploadId = res.data.data.uploadId;//文件对应的id
this.fullPath = res.data.data.fullPath;//上传合并的地址
this.uploadUrls = res.data.data.uploadUrls;//每个分片对应的位置
if (this.uploadUrls && this.uploadUrls.length) {
/**
* 用于并发上传 parallelRun
*/
// this.waitUpLoad.forEach((item, i) => {
// item.formData.append("Upurl", this.uploadUrls[i]);
// });
// this.parallelRun(this.waitUpLoad)
// return;
let i = 0;//第几个分片对应地址
/**
* 文件分片合并
*/
const complete = () => {
Imagecomplete({
bucketName: "static",//MinIO桶名称
fullPath: this.fullPath,//Imageinit返回的上传地址
uploadId: this.uploadId,//Imageinit返回的上传id
}).then(
(res) => {
if (res.data.data) {
this.uploading = false;
this.$emit("fileinput", {
url: "/*minIo桶地址*/" + this.fullPath,//最终文件路径表单提交用
code: this.hash,//md5值校验
imageSize: this.imageSize,//文件大小
name: this.file.name,//文件名
});
this.$message({
type: "success",
message: "上传镜像成功",
});
this.$refs.fileValue.value = ''
this.uploading = false;
} else {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.$message.error("合并失败");
}
},
(err) => {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.$message.error("合并失败");
}
);
};
/**
* 分片上传
*/
const send = async () => {
if (!this.show) {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
return;
}
/**
* 没有可上传的请求合并
*/
if (i >= this.uploadUrls.length) {
// alert('发送完毕')
// 发送完毕
complete();
return;
}
if (this.waitNum == 0) return;
/**
* 通过AXIOS的put将对应的分片文件传到对应的桶里
*/
try {
axios
.put(
this.uploadUrls[i],
this.waitUpLoad[i].formData.get("file")
)
.then(
(result) => {
/*上传一个分片成功就对应减少一个再接着下一个分片上传
*/
this.waitNum--;
i++;
send();
},
(err) => {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.$message.error("上传失败");
}
);
} catch (error) {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.$message.error("上传失败");
}
};
send(); // 发送请求
}
}
});
} catch (error) {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.$message.error("上传失败");
}
},
inputChange() {
this.$refs["fileValue"].dispatchEvent(new MouseEvent("click"));
},
/**
* 用于并发分片上传
* requestList 上传列表 max几个上传并发执行
*/
async parallelRun(requestList, max = 10) {
const requestSliceList = [];
for (let i = 0; i < requestList.length; i += max) {
requestSliceList.push(requestList.slice(i, i + max));
}
for (let i = 0; i < requestSliceList.length; i++) {
const group = requestSliceList[i];
console.log(group);
try {
const res = await Promise.all(group.map(fn => axios.put(
fn.formData.get("Upurl"),
fn.formData.get("file")
)));
res.forEach(item => {
this.waitNum--
})
console.log('接口返回值为：', res);
if (this.waitNum === 0) {
//alert('发送完毕')
// 发送完毕
this.complete();
return;
}
// const res = await Promise.all(group.map(fn => fn));
} catch (error) {
console.error(error);
}
}
},
complete() {
Imagecomplete({
bucketName: "static",//对应的桶
fullPath: this.fullPath,//桶的地址
uploadId: this.uploadId,//桶的id
}).then(
(res) => {
if (res.data.data) {
this.uploading = false;
this.$emit("fileinput", {
url: "/*minIo桶地址*/" + this.fullPath,//'https://asgad/fileinput'+'/1000/20240701/xxx.zip'
code: this.hash,//文件MD5值
imageSize: this.imageSize,//文件大小
});
this.$message({
type: "success",
message: "上传镜像成功",
});
this.$refs.fileValue.value = ''
this.uploading = false;
} else {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.$message.error("合并失败");
}
},
(err) => {
this.file = null;
this.$refs.fileValue.value = ''
this.uploading = false;
this.$message.error("合并失败");
}
);
},
/**
* 获取大文件的MD5数值
* @param {*} file 文件
* @param {*} n 分片大小单位M
*/
computeFileMD5(file, n = 50 * 1024 * 1024) {
//("开始计算...", file);
return new Promise((resolve, reject) => {
let blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice;
let chunkSize = n; // 默认按照一片 50MB 分片
let chunks = Math.ceil(file.size / chunkSize); // 片数
let currentChunk = 0;
let spark = new SparkMD5.ArrayBuffer();
let fileReader = new FileReader();
let that = this;
fileReader.onload = function (e) {
//console.log("read chunk nr", currentChunk + 1, "of", chunks);
spark.append(e.target.result);
currentChunk++;
// console.log("执行进度：" + (currentChunk / chunks) * 100 + "%");
if (currentChunk < chunks && that.show) {
loadNext();
} else {
// console.log("finished loading");
let md5 = spark.end(); //最终md5值
spark.destroy(); //释放缓存
if (currentChunk === chunks) {
resolve(md5);
} else {
reject(e);
}
}
};
fileReader.onerror = function (e) {
reject(e);
};
function loadNext() {
let start = currentChunk * chunkSize;
let end =
start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
},
},
};
</script>

复制代码

页面样式

自行修改

<style lang="scss" scoped>
.file-choose-btn {
overflow: hidden;
position: relative;
input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
}
.tips {
margin-top: 30px;
font-size: 14px;
font-weight: 400;
color: #606266;
}
.file-list {
margin-top: 10px;
}
.list-item {
display: block;
margin-right: 10px;
color: #606266;
line-height: 25px;
margin-bottom: 5px;
width: 90%;
.percentage {
float: right;
}
}
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter,
.list-leave-to
/* .list-leave-active for below version 2.1.8 */
{
opacity: 0;
transform: translateY(-30px);
}
</style>

复制代码

总结

到此这篇关于前端大文件分片MinIO上传的文章就介绍到这了,更多相关前端大文件分片MinIO上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/326821rfo.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！