部署在cyclic.sh的MERN应用上传图片时出现EROFS只读文件系统错误

问题根源 #

Cyclic.sh的运行环境采用只读文件系统，无法直接写入本地uploads目录；而Heroku提供了临时可写存储（重启后数据会丢失），因此原本地存储逻辑在Heroku能临时运行，但不适用于Cyclic.sh。

解决方案：切换至云存储服务 #

不能依赖本地文件系统存储上传文件，需改用云存储服务（如Cloudinary、AWS S3等），以下以Cloudinary为例给出具体实现步骤：

1. 安装依赖 #

在项目根目录执行：

npm install cloudinary multer-storage-cloudinary multer

2. 配置Cloudinary并替换上传逻辑 #

替换原本地存储的后端代码：

const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');
const multer = require('multer');

// 初始化Cloudinary配置（建议通过环境变量注入敏感信息）
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET
});

// 创建Cloudinary存储引擎
const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: 'mern-app-assets', // 自定义云存储文件夹名称
    allowed_formats: ['png', 'jpg', 'jpeg']
  }
});

// 初始化multer上传中间件
const upload = multer({ storage: storage });

// 修改上传接口路由
app.post('/api/upload', upload.single('image'), (req, res) => {
  // 直接返回云存储中的图片URL
  res.status(200).json({ imageUrl: req.file.path });
});

3. 配置Cyclic.sh环境变量 #

在Cyclic.sh项目的「Environment Variables」面板中，添加Cloudinary的三个核心配置项：

• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET

4. 前端适配调整 #

确保前端接收后端返回的云存储URL，后续展示图片时直接使用该URL即可，无需再引用本地路径。

补充说明 #

Heroku的临时可写存储仅能临时保存文件，重启或重新部署后数据会丢失，官方同样不推荐用本地存储处理上传文件。因此切换至云存储不仅解决了Cyclic.sh的问题，也让你的应用在任何平台都具备稳定的文件存储能力。

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