最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can i upload file using formidable with nextjs on vercel - Stack Overflow

programmeradmin7浏览0评论

api/upload.js

import formidable from 'formidable';

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

export default async (req, res) => {
  const form = new formidable.IningForm();
  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)
    });
};

Everything is working fine at localhost but it's not working when i deploy it on vercel.

Function log from vercel dashboard

[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

api/upload.js

import formidable from 'formidable';

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

export default async (req, res) => {
  const form = new formidable.IningForm();
  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)
    });
};

Everything is working fine at localhost but it's not working when i deploy it on vercel.

Function log from vercel dashboard

[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

Share Improve this question edited Sep 22, 2021 at 6:53 juliomalves 50.5k23 gold badges177 silver badges168 bronze badges asked Feb 21, 2021 at 12:52 RahulRahul 2,6171 gold badge25 silver badges47 bronze badges 1
  • 3 Uploading to the /tmp folder on vercel worked for me. See: https://stackoverflow./a/53815373 – tobysas Commented Oct 23, 2021 at 8:54
Add a ment  | 

3 Answers 3

Reset to default 3

if it works on localhost, it's because the application mode on localhost is dev, and if in vercel the application mode is production so it only relies on the .next folder.

if you really want to give it a try, try putting the upload file in the .next/static directory, but it still won't work, with the caveat that the files in vercel are read-only.

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

i have the same problem, and it seems that i can't really add files in vercel (put upload files to vercel server).

the only way is to create another server to place the uploaded files. or deploy your application to another server that supports this.

or you can also use the remendations from vercel, please check at https://vercel./docs/solutions/file-storage

You can make this work by making one small change in your code.

form.uploadDir = "/tmp";

You need a server with file system access

发布评论

评论列表(0)

  1. 暂无评论