提升浏览器大文件上传效率,避免卡顿与内存占用
使用XMLHttpRequest (XHR) 直接上传超过500MB的大文件时,浏览器容易出现卡顿和高内存占用。 为了解决这个问题,建议使用Fetch API优化文件传输流程,实现服务器间直接传输数据流,避免浏览器缓存大型文件。
Fetch API 流式传输方案
以下代码片段演示如何利用Fetch API从服务器A获取响应流,并直接将其写入服务器B的上传请求流中:
fetch('/file.zip').then((resp) => { fetch('/upload', { body: resp.body, method: 'POST', duplex: 'half' }); });
重要提示:
- Safari浏览器目前尚不支持此请求流方式。
- HTTP/1.1协议不支持请求流,需要使用HTTP/2或更高版本协议才能实现此优化。
通过这种服务器端到服务器端的直接数据流传输,可以显著减少浏览器内存占用,并提升大文件上传速度,从而改善用户体验。