nodejs Multer 中间件 req.file 未定义，但 req.body 冰雹

Question

我想用 Multer 上传图像，当我用 postmanden 测试它时，它工作正常，但是当我用 axios 发送请求时，req.file 未定义，但我在 req.body 中得到了我想要的数据，并且在前端收到错误 400 .

multer.ts

import { Request, Response, NextFunction } from "express";
import multer from "multer";

const storage = multer.diskStorage({
  destination: "uploads/",
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, uniqueSuffix);
  },
});

const uploads = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 5,
    files: 1,
    fieldSize: 1024 * 1024 * 5,
  },
  fileFilter: (req, file, cb) => {
    if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
      cb(null, true);
    } else {
      cb(new Error("File type not supported!"));
    }
  },
});

interface RequestWithUser extends Request {
  user?: {
    id: number;
    email: string;
  };
}

export function uploadImage(
  req: RequestWithUser,
  res: Response,
  next: NextFunction
) {
  uploads.single("image")(req, res, (err) => {
    if (err instanceof multer.MulterError) {
      console.error("MulterError =>", err.message);
      return res.status(400).json({ message: err.message });
    }
    if (err) {
      console.error("MulterError =>", err.message);
      return res.status(400).json({ message: err.message });
    }
    if (!req.file) {
      console.error("Please upload an image");
      return res.status(400).json({ message: "Please upload an image" });
    }

    console.log("req.body MWW =>", req.body);

    console.log("req.file MWW =>", req.file);

    next();
  });
}

router.post(
  "/create-image",
  authorize,
  uploadImage,
  createImageController.createImage
);

axios 请求示例

const handleGenerateImage = async (prompt: string, image: string) => {
    const formData = new FormData();

     for (const [key, value] of Object.entries({ prompt, image })) {
       formData.append(key, value as string | Blob);
     }

     console.log("formData", formData);


    try {
      const result = await axios.post(
        "http://localhost:5000/api/create-image",
        formData,
        {
          responseType: "json",
          headers: {
            Accept: "multipart/form-data",
            "Content-Type": "multipart/form-data",
            Authorization: `Bearer ${TOKEN}`,
          },
        }
      );
      console.log("result", result);
      return result;
    } catch (error) {
      console.log("error", error);
      return;
    }
  };

错误
日志错误 [AxiosError：请求失败，状态代码 400]**

形成数据日志
**
LOG formData {"_parts": [["提示", "超人"], ["图像", "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FstickerAI- 4f69cda2-177b-4e6a-9b97-2784a47b4c88/ImagePicker/2fcasdf1-30f5-4149-89a1-0304b7b3acfc.jpeg"]]}

我尝试从 req.body 中获取数据并将其分配给 req.file，

我尝试使用 req.files 并尝试将其用作数组，

我尝试删除内容类型，

app.use(bodyParser.urlencoded({ 扩展: false }));试了一下是真是假，

等等

Answer 1

尝试排除内容类型标头，它应该会自动处理（请参阅：将数据传递到 Axios 中的服务）：

try {
  const result = await axios.post(
    "http://localhost:5000/api/create-image",
    formData,
    {
      responseType: "json",
      headers: {
        Authorization: `Bearer ${TOKEN}`,
      },
    }
  );
  console.log("result", result);
  return result;
} catch (error) {
  console.log("error", error);
  return;
}

如果这不起作用，请尝试使用 fetch（也排除内容类型标头）：

try {
    const result = await fetch(
        "http://localhost:5000/api/create-image",
        {
            method: 'POST',
            body: formData,
            headers: {
                Authorization: `Bearer ${TOKEN}`,
            },
        }
    );
    console.log("result", result);
    // get json
    return await result.json();
} catch (error) {
    console.log("error", error);
    return;
}