//获取文件对象
let file = document.getElementById("file").files[0];
//定义每片的大小
let shardSize = 2 * 1024 * 1024;
//总片数
let shardCount = Math.ceil(file.size / shardSize);
for (let i = 0; i < shardCount; ++i) {
//计算每一片的起始与结束位置
let start = i * shardSize;
let end = Math.min(file.size, start + shardSize);
//创建一个文件片段File对象
let fileShard = file.slice(start, end);
let formData = new FormData();
formData.append("file", fileShard); //每一片的文件对象
formData.append("name", file.name); //文件名
formData.append("total", shardCount); //总片数
formData.append("index", i + 1); //当前是第几片
//上传切片
uploadShard(formData);
}
function uploadShard(formData) {
let xhr = new XMLHttpRequest();
//上传地址请替换为你的服务端接口
xhr.open("POST", "http://xxx.com/api/upload", true);
xhr.send(formData);
xhr.onload = function () {
// 假设服务端返回的响应是字符串形式的 {status: "success"} 或者 {status: "fail"}
let res = JSON.parse(xhr.response);
if(res.status === "success") {
console.log("one shard upload successfully");
} else {
console.log("one shard upload fail, reason: " + res.reason);
}
}
}
其他方法处理:
-
文件压缩:在上传之前可以进行文件或图片的压缩,一般使用lossless压缩或者lossy压缩,减少图片的大小。例如使用像TinyPng这样的工具服务。
-
图像优化:在不影响图像质量的情况下进行优化,例如使用webp格式来替代一些传统的图像格式。
-
文件分片:将大文件切成小的分片,然后分别进行上传,这样即使某个分片上传失败也只需要重新上传这个分片而不是整个文件。
-
使用CDN和负载均衡:通过使用内容分发网络(CDN)和负载均衡器,我们可以分发用户的请求,降低服务器的压力,加快上传速度。
-
提高服务器性能和带宽:这需要成本投入,但是高性能的服务器和更大的网络带宽可以显著提高上传速度。
-
客户端和服务器之间的通讯优化:采用更高效的数据传输协议,如HTTP2.0等。
-
异步上传:不必让用户一直等待上传过程,用户可以在等待上传完成的过程中做一些其他的操作。