Next.js：文件上传时错误 413 请求实体太大

Question

我在尝试使用 Next.js 上传大文件时遇到问题。我在输入文件上创建了一个 onChange function，代码如下：

const handleFileUpload = () => new Promise(async (resolve) => {
    if(ref.current?.files){
        const formData = new FormData()
        Object.entries(ref.current.files).map(([i, f]) => {
            return formData.append(`${id}_${i}`, f)
        })

        const config = {
            headers: { 'content-type': 'multipart/form-data' },
            onUploadProgress: (event) => {
                const p = Math.round((event.loaded * 100) / event.total);
                setProgress(p)
            }
        }

        try{
            const response = await axios.post('/api/upload-file', formData, config);
            resolve(response)
        }
        catch(err){
            console.log(err)
        }
   }
}

这是我的 /api/upload-file.js

import nextConnect from 'next-connect';
import multer from 'multer';
import { METHOD_NOT_ALLOWED, NOT_IMPLEMENTED, OK } from '../../utils/statusCode';

const upload = multer({

    storage: multer.diskStorage({
        destination: './public/upload',
        filename: (req, file, cb) => cb(null, file.originalname),
    })

})

const apiRoute = nextConnect({

    onError(error, req, res){
        res.status(NOT_IMPLEMENTED).json({error: `Errore: impossibile procedere. ${error.message}`})
    },
    onNoMatch(req, res){
        res.status(METHOD_NOT_ALLOWED).json({error: `Metodo ${req.method} non permesso`})
    }

})

apiRoute.use(upload.any())
apiRoute.post((req, res) => res.status(OK).json({data: 'success'}))

export default apiRoute

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

它适用于小文件，但我收到较大文件（甚至 1 或 2MB）的 413 错误，我在这里遗漏了什么吗？

我正在使用 Next.js 12.0.3

Answer 1

我为这个错误苦苦挣扎了将近两天。 而且，我终于解决了它。 在文件上传期间，服务器需要您的文件数据结束的边界。

诀窍是使用“唯一边界”标记

应该使用的代码是：

await axios.post(
    url,
    filedataObj,
    {
        headers: {
            ...fileToUpload.getHeaders(),
            //some other headers
        },
    }
);

参见https://www.gyanblog.com/javascript/next.js-solving-request-entity-too-large-issue-413/

Answer 2

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '20mb',
    },
  },
};

将此添加到您要上传文件的 api 路由，它将解决问题。

Answer 3

修复 nginx 设置后发现问题并解决了问题