上传文件时,文件过大导致上传缓慢,将文件分段上传

//获取文件对象
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);
       }
   }
}

其他方法处理:

  1. 文件压缩:在上传之前可以进行文件或图片的压缩,一般使用lossless压缩或者lossy压缩,减少图片的大小。例如使用像TinyPng这样的工具服务。

  2. 图像优化:在不影响图像质量的情况下进行优化,例如使用webp格式来替代一些传统的图像格式。

  3. 文件分片:将大文件切成小的分片,然后分别进行上传,这样即使某个分片上传失败也只需要重新上传这个分片而不是整个文件。

  4. 使用CDN和负载均衡:通过使用内容分发网络(CDN)和负载均衡器,我们可以分发用户的请求,降低服务器的压力,加快上传速度。

  5. 提高服务器性能和带宽:这需要成本投入,但是高性能的服务器和更大的网络带宽可以显著提高上传速度。

  6. 客户端和服务器之间的通讯优化:采用更高效的数据传输协议,如HTTP2.0等。

  7. 异步上传:不必让用户一直等待上传过程,用户可以在等待上传完成的过程中做一些其他的操作。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值