Хочу обратиться к файлу на сервере и вывести его на клиенте, но req.file = undefined
upload.ts:
import { NextApiRequest, NextApiResponse } from 'next';
import nextConnect from 'next-connect';
import connectMongo from "../../utils/connectMongo";
import multer from 'multer';
connectMongo();
const upload = multer({
storage: multer.diskStorage({
destination: (req, file, cb) => cb(null, "../../public/uploads"),
filename: (req, file, cb) => cb(null, file.originalname),
})
});
const apiRoute = nextConnect({
onNoMatch(req:NextApiRequest, res:NextApiResponse) {
res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
}
});
apiRoute.post((req:any, res:NextApiResponse) => {
try {
upload.single("coverPhoto")(req, {}, err => {
console.log(req.file); // undefined
});
} catch(e) {
res.status(500).json({ success: false, message: "Ошибка сервера" })
}
});
export default apiRoute;
export const config = {
api: {
bodyParser: true
}
};
React handlers:
const [addProject, setAddProject] = React.useState<IProject>(projectDefaultState);
const addCoverPhotoHandler = async(event) => {
if (!event.target.files?.length) return;
setAddProject({ ...addProject, coverPhoto: event.target.files[0] });
}
const addProjectHandler = async(event) => {
event.preventDefault();
const response = await fetch(`${process.env.API_URL}/api/upload`, {
method: "POST",
body: addProject.coverPhoto
})
const data = await response.json();
console.log(data);
}
Input:
<MyInput
accept={[".png", ".svg", ".jpg", ".jpeg"]}
multiple={false}
name="coverPhoto"
placeholder="Обложка"
type="file"
onChange={addCoverPhotoHandler}
/>
<MyButton onClick={addProjectHandler}>Опубликовать</MyButton>