Multer部署至Render后无法在public/assets添加/显示图片问题

核心问题 #

1. Render临时文件系统限制：Render平台的本地磁盘属于临时存储，实例重启、部署更新后，所有上传的文件都会被清除；同时容器环境对本地路径的权限、识别逻辑和本地开发环境存在差异。
2. 相对路径适配问题：代码中multer的destination使用了相对路径"public/assets"，在Render容器中这个路径可能并非预期的文件存储位置，直接导致文件无法写入。

步骤1：修复路径问题（解决即时上传失败） #

将multer的存储目标路径改为绝对路径，同时确保目录存在，避免Render环境下因目录缺失导致写入失败：

const fs = require('fs');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 用绝对路径替代相对路径，和静态文件服务路径保持一致
    const uploadPath = path.join(__dirname, "public/assets");
    // 递归创建目录，确保路径存在
    fs.mkdirSync(uploadPath, { recursive: true });
    cb(null, uploadPath);
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});

步骤2：改用持久化存储（解决文件丢失问题） #

Render本地存储的临时特性决定了即使修复路径，上传的文件也会在实例变动后丢失，必须使用云存储服务替代。以轻量易用的Cloudinary为例：

1. 安装依赖：

npm install cloudinary multer-storage-cloudinary

2. 修改multer配置：

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

// 配置Cloudinary账号信息
cloudinary.config({
  cloud_name: '你的cloud_name',
  api_key: '你的api_key',
  api_secret: '你的api_secret'
});

const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: 'assets', // 云存储中的目标文件夹
    allowed_formats: ['jpg', 'png', 'jpeg'], // 允许的文件格式
  },
});

const upload = multer({ storage });

配置完成后，文件会直接上传至Cloudinary云端，后续直接使用返回的云端URL展示图片即可，无需再依赖本地静态文件服务。

额外提示 #

• 若临时测试需要使用Render本地存储，需确保public/assets目录已提交至Git仓库，否则容器启动时该目录不存在会导致写入失败。
• 若坚持使用Render本地持久化存储，需在Render控制台创建Persistent Disk并挂载到指定路径，再将multer的目标路径修改为挂载路径。

内容的提问来源于stack exchange，提问作者1208_ Sagar Kapoor