介绍前端上传大文件的常见问题和解决方案,分片上传
这样可以避免一次性上传大文件导致的网络超时、内存溢出、进度不可控等问题。
要实现大文件分片上传,通常需要以下几个步骤:
1.通过DOM获取文件对象,并且对文件进行MD5加密(文件内容+文件标题形式),采用SparkMD5进行文件加密;
2.进行分片设置,利用Blob的slice方法进行文件分片处理,并且依次进行上传;
3.当分片文件上传完成后,请求合并接口后端进行文件合并处理即可。
一个简单的js代码示例如下:
// 获取input元素
var input = document.getElementById("file");
// 获取选择的第一个文件
var file = input.files[0];
// 设置每个分片大小为5MB
var chunkSize = 5 * 1024 * 1024;
// 计算总共有多少个分片
var totalChunks = Math.ceil(file.size / chunkSize);
// 定义一个数组存放所有的分片
var chunks = [];
// 遍历所有的分片
for (var i = 0; i < totalChunks; i++) {
// 利用slice方法获取每个分片
var start = i * chunkSize;
var end = Math.min(file.size, start + chunkSize);
var blob = file.slice(start, end);
// 将每个分片添加到数组中
chunks.push(blob);
}
// 定义一个变量存放当前正在上传的分片索引
var currentChunk = 0;
// 定义一个函数用于递归地上传每个分片
function upload() {
// 如果当前索引等于总数,则说明所有分片都已经上传完成,请求合并接口即可
if (currentChunk === totalChunks) {
console.log("All chunks uploaded!");
// 请求合并接口(省略)
return;
}
// 获取当前要上传的分片对象
var chunk = chunks[currentChunk];
// 创建一个表单数据对象,添加相关信息(如MD5值、索引、总数等)
var formData = new FormData();
formData.append("file", chunk);
formData.append("md5", file.md5); // 假设已经计算好了MD5值(省略)
formData.append("index", currentChunk);
formData.append("total", totalChunks);
// 创建一个XMLHttpRequest对象,发送POST请求到服务器端(假设地址为/upload)
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
// 监听请求状态变化事件
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status ===200) {
console.log("Chunk " + currentChunk + " uploaded!");
// 如果成功,则递增索引,并继续调用upload函数
currentChunk++;
upload();
} else {
console.log("Upload failed!");
// 如果失败,则重试或者提示错误信息(省略)
}
}
};
// 发送表单数据对象
xhr.send(formData);
}
// 调用upload函数开始上传第一个分片
upload();
以上就是分片上传的核心思想和实现步骤,有什么问题欢迎指正。
参考文章:http://blog.ncmem.com/wordpress/2023/11/13/%e5%89%8d%e7%ab%af%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%bc%98%e5%8c%96%e6%96%b9%e6%a1%88-%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/
欢迎入群一起讨论
标签:文件,前端,upload,file,分片,var,上传 From: https://www.cnblogs.com/songsu/p/17829344.html