我如何在 vercel 上使用 formidable 和 nextjs 上传文件

How can i upload file using formidable with nextjs on vercel

api/upload.js

import formidable from 'formidable';

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async (req, res) => {
  const form = new formidable.IncomingForm();
  form.uploadDir = "./";
  form.keepExtensions = true;
  form.parse(req, (err, fields, files) => {
    console.log(err, fields, files);
    res.send(err || "DONE")
  });
};

api/get.js

export default async (_, res) => {
    const fs = require('fs');
    fs.readdir("./", (err, files) => {
        console.log(err)
        res.send(err || files)
    });
};

localhost 一切正常,但是当我在 vercel 上部署它时它不工作。

来自 Vercel 仪表板的功能日志

[POST] /api/upload

2021-02-21T12:47:11.662Z    f7bb8a02-2244-4d27-8a55-9e00a43b307b    ERROR   Uncaught Exception  {"errorType":"Error","errorMessage":"EROFS: read-only file system, open 'upload_2dd906bdebc97a1d63a371c9207b84be.png'","code":"EROFS","errno":-30,"syscall":"open","path":"upload_2dd906bdebc97a1d63a371c9207b84be.png","stack":["Error: EROFS: read-only file system, open 'upload_2dd906bdebc97a1d63a371c9207b84be.png'"]}
Unknown application error occurred

您需要一台具有文件系统访问权限的服务器

如果在localhost上运行,是因为localhost上的应用模式是dev,如果在vercel上应用模式是production,所以只依赖.next文件夹。

如果你真的想试试,把上传的文件放到.next/static目录下试试,还是不行,注意vercel里面的文件是只读的.

path.resolve('.next','static');

我也遇到了同样的问题,好像真的无法在vercel中添加文件(将上传文件放到vercel服务器)。

唯一的办法就是创建另一个服务器来放置上传的文件。或将您的应用程序部署到支持此功能的另一台服务器。

或者您也可以使用vercel的推荐,请查看https://vercel.com/docs/solutions/file-storage