React如何实现前端直接上传图片到public文件夹及相关问题咨询

可行性结论 #

开发阶段可以模拟实现类似效果，但Heroku生产环境完全无法使用该方案，即使是自建Node.js服务器的场景也极不推荐：

1. React源码中的public目录是构建前的静态资源存放目录，项目打包后所有public内的资源会被整合到build目录，运行时服务读取的是build目录的产物，直接写入源码public目录的文件运行时无法访问
2. 如果你用Node.js后端同时托管React打包产物，理论上可以把上传文件写入后端配置的静态资源托管目录（比如Express中用app.use(express.static('static'))指定的目录），但该逻辑和Laravel的public目录逻辑仅表面相似，底层运行机制完全不同

和Laravel方案的差异 #

Laravel是服务端渲染框架，public目录是服务运行时直接对外暴露的静态资源根目录，运行时写入的文件可以直接被外部访问。而React是前端框架，需要先构建打包才能部署运行，源码目录和运行时的静态资源目录是完全隔离的，两者的运行逻辑没有可比性。

该实现方式的核心弊端 #

• Heroku环境天然不支持：Heroku的dyno实例采用临时文件系统，每24小时至少会自动重启一次，每次重启、重新部署都会清空所有本地写入的文件，上传的资源完全无法持久化存储
• 部署更新会清空资源：每次重新部署项目构建打包时，会全量覆盖运行时的静态资源目录，之前上传的所有图片会被直接清空
• 服务性能损耗严重：静态资源访问和后端接口共享服务器的带宽、IO资源，上传的文件越多、访问量越大，后端服务的响应速度就会越慢，很容易触发服务器资源上限
• 无法支持扩容：如果后续需要做服务多实例水平扩容，每个实例的本地存储是独立的，用户上传到A实例的图片，访问请求打到B实例时就会返回404
• 安全风险高：如果没有做严格的文件格式校验、权限控制，攻击者可以上传恶意脚本、可执行文件到静态目录，轻则触发XSS攻击，重则导致服务器被入侵
• 运维成本高：本地存储的图片需要单独做定期备份策略，迁移服务器时还要单独迁移所有图片资源，维护成本远高于云存储方案

内容的提问来源于stack exchange，提问作者George Ponta