¿Cómo obtengo una imagen cargada en la ruta API next.js y la guardo en una carpeta pública? Tengo el tren delantero listo. Estoy cargando imágenes a un punto final usando JavaScript simple. aquí está la función onSubmit para cargar imágenes. Sugiérame si lo estoy haciendo mal aquí. La pregunta principal es ¿cómo lo recupero?
const onSubmit=async(e)=>{ e.preventDefault(); const fd=new FormData() fd.append('myfile',image.name) let res=await fetch(`http://localhost:3000/api/upload`,{ method: 'POST', headers: { "Content-Type": "image/jpeg", }, body: fd, }) let response=await res.json();una pregunta extra más, seguramente no es una buena idea guardar las imágenes cargadas en una carpeta pública. Lo he guardado en algún lugar de la nube.
Este es el código de punto final que utilicé para cargar la imagen en nextjs, requiere algunos paquetes adicionales, también los enumeraré a continuación.
import nextConnect from "next-connect"; import multer from "multer"; import { v4 as uuidv4 } from "uuid"; let filename = uuidv4() + "-" + new Date().getTime(); const upload = multer({ storage: multer.diskStorage({ destination: "./public/uploads/profiles", // destination folder filename: (req, file, cb) => cb(null, getFileName(file)), }), }); const getFileName = (file) => { filename += "." + file.originalname.substring( file.originalname.lastIndexOf(".") + 1, file.originalname.length ); return filename; }; const apiRoute = nextConnect({ onError(error, req, res) { res .status(501) .json({ error: `Sorry something Happened! ${error.message}` }); }, onNoMatch(req, res) { res.status(405).json({ error: `Method '${req.method}' Not Allowed` }); }, }); apiRoute.use(upload.array("file")); // attribute name you are sending the file by apiRoute.post((req, res) => { res.status(200).json({ data: `/uploads/profiles/${filename}` }); // response }); export default apiRoute; export const config = { api: { bodyParser: false, // Disallow body parsing, consume as stream }, };