Tengo problemas para cargar archivos grandes con Next.js. Creé una función onChange en mi archivo de entrada, aquí está el código:
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) } } }Y este es mi /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 } }Funciona perfectamente con archivos pequeños, pero recibo un error 413 con archivos más grandes (incluso 1 o 2 MB), ¿hay algo que me esté perdiendo aquí?
Estoy usando Next.js 12.0.3
Luché con este error durante casi dos días. Y finalmente lo resolví. Durante la carga de archivos, el servidor requiere un límite donde terminan los datos de su archivo.
El truco es usar un marcador de "límite único"
El código que se debe usar es:
await axios.post( url, filedataObj, { headers: { ...fileToUpload.getHeaders(), //some other headers }, } );Consulte https://www.gyanblog.com/javascript/next-js-solution-request-entity-too-large-issue-413/