Vercel无服务器环境图片上传、MongoDB存取及Vercel Blob咨询

问题解答 #

1. Vercel无服务器环境下的图片上传处理 #

Vercel的Serverless Function是无状态临时环境，本地磁盘仅提供/tmp临时目录（函数执行结束后即被清理），无法持久化存储文件，也不允许创建自定义目录（如./uploadphoto）。解决方案如下：

• 放弃multer.diskStorage，改用multer.memoryStorage()将文件暂存到内存中
• 直接将内存中的文件上传到云存储服务（如Vercel Blob、AWS S3等），避免落地到本地磁盘
• 云存储会返回可访问的公共URL，将该URL存入MongoDB，而非本地文件名

修改后的路由存储配置示例：

// 改用内存存储
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

2. 生成图片可访问URL的实现方案 #

本地开发场景

将uploadphoto目录设为Express静态资源目录，即可通过HTTP访问文件：

// 在主app.js中添加
app.use('/uploadphoto', express.static('uploadphoto'))

此时图片URL格式为：http://localhost:8000/uploadphoto/[文件名]，存入MongoDB时直接拼接该格式即可。

线上生产场景

使用云存储服务时，文件上传完成后会直接返回公共访问URL，将该URL直接存入MongoDB即可。例如用Vercel Blob上传后，会得到类似https://public.blob.vercel-storage.com/xxx.jpg的URL，前端直接使用该URL加载图片。

3. Vercel Blob Storage 工作机制与使用方法 #

核心工作机制

Vercel Blob是Vercel推出的对象存储服务，专为Vercel部署的应用优化：

• 无状态设计：不需要维护自己的存储服务器，完全由Vercel托管
• 全球CDN加速：上传的文件会分发到Vercel全球CDN节点，用户访问速度更快
• 直接上传支持：允许前端绕过服务器直接上传文件到Blob，减少服务器压力
• 自动生命周期管理：支持配置文件过期时间，自动清理旧文件

具体使用步骤

1. 安装依赖包

npm install @vercel/blob

2. 在Vercel控制台配置
   • 进入项目的Storage页面，创建Blob存储
   • 获取BLOB_READ_WRITE_TOKEN，添加到项目环境变量中
3. 修改控制器代码实现上传

import { put } from '@vercel/blob';

export const addimage = async (req, res) => {
    try {
        // 从内存中读取文件
        const file = req.file;
        // 生成唯一文件名
        const fileName = `${Date.now()}_${file.originalname}`;
        // 上传到Vercel Blob
        const { url } = await put(fileName, file.buffer, {
            access: 'public', // 设置为公共访问
            token: process.env.BLOB_READ_WRITE_TOKEN
        });
        // 将URL存入app.locals，供后续添加产品使用
        req.app.locals = { photo: url };
        return res.send({ url });
    } catch (error) {
        console.error("上传失败:", error);
        return res.status(500).send(error.message);
    }
}

4. 更新产品添加逻辑
   在addproduct函数中，直接将req.app.locals.photo（即Blob返回的URL）存入MongoDB的product_image字段即可，前端后续直接使用该URL加载图片。

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