Vercel部署Next.js 13后上传文件至public目录遇权限错误

Vercel生产环境采用只读文件系统（EROFS），部署后的项目目录（包括public）属于静态打包资源，不允许运行时执行写入操作。本地开发环境拥有文件系统读写权限，因此代码能正常工作，但部署到Vercel后会触发权限错误。

Vercel官方推荐使用专用云存储服务处理文件上传，比如Vercel Blob（与Vercel深度集成）、Cloudinary、AWS S3等。以下以Vercel Blob为例修改代码：

步骤1：安装依赖 #

npm install @vercel/blob

步骤2：配置环境变量 #

在Vercel项目控制台添加环境变量BLOB_READ_WRITE_TOKEN，取值可从Vercel Dashboard的Blob服务页面获取。

步骤3：修改API路由代码 #

import { put } from '@vercel/blob';
import { type NextRequest, NextResponse } from "next/server";
import sharp from 'sharp';
import { v4 as uuidv4 } from 'uuid';

export async function POST(request: NextRequest) {
  const formData = await request.formData();
  const file: File | null = formData.get('file') as unknown as File;

  if (!file) return NextResponse.json({ success: false });

  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);
  
  // 转换为webp格式
  const webpBuffer = await sharp(buffer).toFormat('webp').toBuffer();
  const fileName = `${uuidv4()}.webp`;

  // 上传到Vercel Blob
  const { url } = await put(fileName, webpBuffer, {
    access: 'public', // 设置为公开访问
  });

  // 返回正确的JSON响应（原headers的image/png错误，应改为application/json）
  return NextResponse.json({ 
    success: true, 
    message: "文件上传成功", 
    imageUrl: url 
  }, { status: 200 });
}

其他注意事项 #

• 若选择其他存储服务（如Cloudinary），核心逻辑一致：将文件缓冲区上传至第三方服务，获取访问URL，而非写入本地文件系统。
• 禁止在Vercel Serverless Functions中尝试写入任何本地路径，所有持久化数据需依赖外部存储服务。

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