导入大文件时浏览器崩溃怎么办_改用服务器端UploadDir导入

星晨同学_5915

星晨同学_5915

2026-05-01

1065人浏览

原创

浏览器上传大文件崩溃是因内存耗尽:读取1gb文件可能占用2gb内存,超出chrome js堆限制(≤2gb),触发oom致白屏;uploaddir通过服务端目录监听机制绕过该限制,客户端仅发起轻量握手请求,后续用rsync等工具直传磁盘,零前端内存压力。

浏览器直接上传大文件为什么会崩溃

因为浏览器把整个文件读进内存再发请求,1GB 文件可能吃掉 2GB 内存(含 Base64 编码或 Blob 处理开销),加上 Chrome 对单个 JS 堆的默认限制(通常 ≤2GB),FileReader 或 f.readAsArrayBuffer() 过程中直接触发 OOM,页面白屏或自动关闭标签页。

  • 不是网络超时,是内存耗尽 —— 查看 Chrome 任务管理器(Shift+Esc)能看到“JavaScript 内存”列飙升后归零
  • fetch() 或 XMLHttpRequest 本身不缓存全量数据,但前端读取逻辑(比如分块前先 file.slice() 太多)会提前触发加载
  • 即使加了进度条,也掩盖不了内存已在后台暴涨的事实

UploadDir 是什么,为什么它能绕过浏览器限制

UploadDir 不是前端 API,而是某些后端框架(如 Go 的 gin-contrib/fileupload、Python FastAPI 配合 shutil.copyfileobj() 流式接收)提供的服务端目录监听机制:客户端只发一个轻量级请求(比如 POST /upload/start),后端生成临时上传路径,然后你用 scp、rsync 或本地脚本把大文件直接写入该目录,服务端定时扫描并触发处理逻辑。

  • 完全跳过 HTTP body 解析和内存缓冲,文件以原始字节流落地磁盘
  • 对浏览器零压力 —— 它只负责发起一次握手,后续传输由系统工具完成
  • 注意:UploadDir 不是标准协议,具体实现依赖后端代码,常见于内部工具或定制平台(如某些私有 Git LFS 替代方案)

怎么安全启用 UploadDir 模式(关键配置点)

核心不是“怎么调用”,而是“怎么不让它变成任意文件写入漏洞”。必须收口在可控路径 + 明确生命周期 + 权限隔离。

仿UC浏览器官方网站全屏jQuery幻灯片
仿UC浏览器官方网站全屏jQuery幻灯片

仿UC浏览器官方网站全屏jQuery幻灯片

下载
  • 上传目录必须是绝对路径且不在 Web 根目录下,例如 /var/tmp/upload_202410/,禁止使用 ./uploads 或 ../static
  • 每个上传任务应带唯一 token,目录名包含该 token(如 /var/tmp/upload_202410/abc123/),避免撞名覆盖
  • 后端需设置最大单文件大小(通过 os.Stat() 或 du -h 定期检查)、过期时间(比如 24 小时未完成则 rm -rf)
  • Linux 下建议用独立用户运行服务,并给上传目录设 chown uploaduser:uploadgroup /var/tmp/upload_202410 和 chmod 750

前端要改什么?其实几乎不用改

你只需要替换掉原来绑在 input[type="file"] 上的 onChange 处理函数。新流程里,浏览器只做三件事:申请 token、展示本地命令、轮询状态。

fetch('/upload/start', { method: 'POST' })
  .then(r => r.json())
  .then(({ token, upload_dir }) => {
    // 告诉用户执行:
    // rsync -avP ./large.zip user@server:/var/tmp/upload_202410/${token}/
    document.getElementById('cmd').textContent = 
      `rsync -avP ./large.zip user@server:${upload_dir}`;
  });
  • 不需要改任何 FormData、AbortController 或分片逻辑
  • 轮询用 fetch(`/upload/status?token=${token}`) 即可,返回 { status: "ready" | "processing" | "done" }
  • 别忘了禁用原上传按钮,防止用户误点两次 —— button.disabled = true 要在 fetch 后立刻执行
实际部署时最常漏的是清理策略和目录权限。上传目录一旦失控,就等于开了个匿名 FTP,比接口被刷还危险。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

浏览器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
大数据分析工具有哪四个
大数据分析工具有哪四个

大数据分析的四个工具分别是rapidminer、Hpcc、Hadoop和Pentaho bi。大数据分析用于从各种来源生成的原始数据中提取有价值的数据。这些数据帮助我们获得有意义的见解、隐藏的模式、未知的相关性、市场趋势等等,具体取决于行业。大数据分析的主要动机是提供有价值的见解,以便为未来做出更好的决策。php中文网为大家带来了大数据分析的相关教程、以及相关文章等内容,供大家免费下载使用。

2023.06.21

4736

5

Java 大数据处理基础(Hadoop 方向)
Java 大数据处理基础(Hadoop 方向)

本专题聚焦 Java 在大数据离线处理场景中的核心应用,系统讲解 Hadoop 生态的基本原理、HDFS 文件系统操作、MapReduce 编程模型、作业优化策略以及常见数据处理流程。通过实际示例(如日志分析、批处理任务),帮助学习者掌握使用 Java 构建高效大数据处理程序的完整方法。

2025.12.08

1249

12

大数据专业学习教程
大数据专业学习教程

本专题整合了大数据专业学习相关教程,阅读专题下面的文章了解更多详细内容。

2026.01.05

223

5

python处理大数据合集
python处理大数据合集

本专题整合了python处理大数据相关教程,阅读专题下面的文章了解更多详细内容。

2026.01.05

466

22

服务器是什么
服务器是什么

服务器是一种计算机硬件设备或软件程序,它具有强大的计算和存储能力,用请求、存储数据和提供服务。它在互联网中着关重要的作用,为用户提供各种服务和资源。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.15

437

5

连接apple id服务器时出错
连接apple id服务器时出错

连接apple id服务器时出错的原因包括网络连接问题、服务器问题、Apple ID账户问题、设备问题、防火墙或安全软件问题、时间和日期设置问题、Apple服务器维护等。本专题为大家提供apple id相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.08

900

5

搭建互联网服务器
搭建互联网服务器

搭建互联网服务器需要:1、选择合适的硬件和操作系统,第一步是选择合适的硬件和操作系统;2、安装和配置操作系统,是搭建互联网服务器的关键步骤;3、安装和配置服务器软件,是搭建互联网服务器的下一步,常见的服务器软件包括Apache、Nginx、Tomcat等;4、配置防火墙和安全性,是搭建互联网服务器的重要步骤;5、域名解析和配置,是搭建互联网服务器的最后一步。

2023.09.19

2752

5

如何查看服务器状态
如何查看服务器状态

查看服务器状态的方法有使用命令行工具、图形界面工具、监控工具、日志文件和远程管理工具等。本专题为大家提供服务器状态相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.09

916

5

服务器域名转接慢怎么解决
服务器域名转接慢怎么解决

服务器域名转接慢的解决办法有DNS优化、服务器优化、CDN加速、前端优化和网络优化等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.17

829

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpMyAdmin 常见问题
phpMyAdmin 常见问题

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习