MERN项目部署Vercel后Multer上传图片无法显示及上传失败求助

问题背景 #

本地环境下MERN项目的图片上传、预览、存储MongoDB及展示功能正常，但后端部署到Vercel后，无法完成新图片上传，也无法显示已上传的图片。

核心原因 #

Vercel是Serverless无服务器平台，存在两个关键限制：

1. 临时文件系统：Node.js函数运行时的文件系统是临时的，上传的文件会在函数执行结束后被自动清除，无法持久化存储。
2. 静态资源限制：Vercel仅能识别部署时打包进项目的静态文件，运行时动态生成的文件（如Multer上传到public/images的图片）无法被静态服务访问。

解决方案：改用云存储替代本地磁盘存储 #

推荐使用Cloudinary（免费额度满足初学者需求），步骤如下：

1. 准备Cloudinary环境 #

• 注册Cloudinary账号，获取CLOUDINARY_CLOUD_NAME、CLOUDINARY_API_KEY、CLOUDINARY_API_SECRET三个密钥。
• 安装依赖：

npm install cloudinary multer-storage-cloudinary

2. 修改后端代码 #

替换原Multer的磁盘存储配置为Cloudinary存储：

const express = require("express");
const cors = require("cors");
const multer = require("multer");
const { CloudinaryStorage } = require("multer-storage-cloudinary");
const cloudinary = require("cloudinary").v2;

// 配置Cloudinary
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

// 配置Multer使用Cloudinary存储
const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: "mern-upload-images", // Cloudinary中存储图片的文件夹名
    allowed_formats: ["jpg", "png", "jpeg"],
  },
});

const upload = multer({ storage: storage });

// 中间件配置
app.use(cors());
app.use(express.json());
// 无需再配置express.static("public")，图片直接存储在Cloudinary

// 修改上传接口：存储Cloudinary返回的图片URL到MongoDB
app.post("/upload", upload.single("file"), async (req, res) => {
  const data = { imageUrl: req.file.path }; // req.file.path是Cloudinary的图片访问URL
  const result = await uploadsCollection.insertOne(data);
  res.send(result);
});

// 修改获取图片接口：返回包含imageUrl的数据集
app.get("/get-uploads", async (req, res) => {
  const images = await uploadsCollection.find().toArray();
  res.send(images);
});

3. 配置Vercel环境变量 #

在Vercel项目的Settings -> Environment Variables中添加以下变量：

• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET

4. 调整前端代码 #

前端直接使用Cloudinary的URL展示图片，无需拼接服务器路径：

// 图片展示部分修改
images.map((image) => (
  <img
    key={image._id}
    className="rounded-md w-32 h-32 border border-theme p-2"
    src={image.imageUrl}
    alt=""
  />
))

5. 优化vercel.json（可选） #

简化路由配置，保持原有功能即可：

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

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