React项目中图片动态上传、存储与展示的优化方案求助

原业务场景 #

• 基于create-react-app开发提交表单，用于记录每日工作内容，生成包含文本、日期、多张图片的「post」并存储到MongoDB
• 页面加载时，通过自研的MongoDB接口API获取所有post，其中图片以base64数据URL形式存储和展示

当前遇到的问题 #

• 最初采用GridFS方案存储图片，在图片数量较少（约15张）时表现正常
• 随着页面图片数量增加至36张，GridFS存储的图片出现下载速度极慢且无法缓存的问题，已无法满足使用需求

理想优化方案 #

• 调整上传逻辑：让表单直接将图片上传至React服务器，利用服务器实现图片缓存
• 调整MongoDB存储结构：post中仅关联图片文件名，不再存储base64或GridFS格式的图片数据
• 安全性说明：表单及API均已设置密码保护，且数据已做备份，无需担忧安全问题

相关资源 #

• API代码仓库：mongoapi
• 站点代码仓库：mightypirates
• 演示站点：可查看base64格式图片的展示效果
• 表单页面截图：

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