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

【问题标题】：Next.js: Error 413 Request Entity Too Large on file uploadNext.js：文件上传时出现错误 413 请求实体太大
【发布时间】：2021-12-28 07:31:34
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs axios next.js

【解决方案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/

【讨论】：