主页 / 问题 / 1386096
Accepted
Алексей Яковлев
Asked:2022-07-27 19:16:14 +0000 UTC2022-07-27 19:16:14 +0000 UTC

输出文件时返回 undefined

  • 772

我想访问服务器上的文件并将其输出到客户端，但是req.file = undefined

上传.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
    }
};

反应处理程序：

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);
    }

输入：

<MyInput
  accept={[".png", ".svg", ".jpg", ".jpeg"]}
  multiple={false}
  name="coverPhoto"
  placeholder="Обложка"
  type="file"
  onChange={addCoverPhotoHandler}
/>
<MyButton onClick={addProjectHandler}>Опубликовать</MyButton>

node.js

1 个回答

  1. Best Answer

    上传.ts：

    import { NextApiResponse } from 'next';
import connectMongo from "../../../utils/connectMongo";
import multer from 'multer';
import path from "path";
import handler from '../handler';

connectMongo();

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

const storage = multer.diskStorage({
    destination:(req, file, cb) => {
        cb(null, "public/uploads")
    },
    filename:(req, file, cb) => {
        cb(null, file.fieldname + "-" + Date.now() + path.extname(file.originalname))
    }
})

const uploadImages = multer({ storage });
const uploadCoverPhoto = uploadImages.single("coverPhoto");

handler.use(uploadCoverPhoto);

export default handler.post(async(req:any, res:NextApiResponse) => {
    try {
        const { file } = req;
        console.log(file);
    } catch(e) {
        console.log(e);
        res.status(500).json({
            success: false, message: "Ошибка сервера"
        })
    }
})

    反应处理程序：

    const addCoverPhotoHandler = async(event) => {
        if (!event.target.files?.length) return;
        const formData = new FormData();
        
        formData.append("coverPhoto", event.target.files[0]);

        const response:any = axios.post(`${process.env.API_URL}/api/upload`, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })

        response.then((res:any) => {
            if (!res.data.success) {
                return setInfo({
                    type: "error",
                    text: "Ошибка при публикации обложки"
                })
            }
            setActive(false);
            imagesConfig.coverImage = res.data.infoFile;
        }).catch(err => {
            setInfo({
                type: "error",
                text: `Ошибка сервера: ${err.message}`
            })
        })
    }

    • 0

相关问题