使用 multer 包上传图片时出现错误

Question

其实我是第一次使用multer。我正在从事在线食品订购网站项目。我在那里为管理员创建了一个选项来创建新产品。我在那里使用 multer 。但是在上传时出现错误，我无法上传图片以及该产品的其他描述。所以我正在寻找任何帮助，因为我对如何使用 multer 知之甚少。 这是我的创建页面 - 创建.js

import React from "react";
import "./Create.css";
import { AiOutlineCloseCircle } from "react-icons/ai";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";

const Create = () => {
  const [title, setTitle] = useState("");
  const [desc, setDesc] = useState("");
  const [category, setCategory] = useState("");
  const [image, setImage] = useState("");
  const [price, setPrice] = useState("");
  const [review, setReview] = useState("");
  const navigate = useNavigate();
  // we get the auth slice from the entire state, which(auth slice)
  // is the userInfo and the token
  const { token } = useSelector((state) => state.auth);

  // type="file", e.target.files[0]
  const onChangeFile = (e) => {
    setImage(e.target.files[0]);
  };

  const handleCloseImg = () => {
    setImage("");
  };

  const handleCreateProduct = async (e) => {
    e.preventDefault();

    try {
      const formData = new FormData();
      let filename = null;

      if (image) {
        filename = Date.now() + image.name;
        formData.append("filename", filename);
        formData.append("image", image);

        await fetch("/upload/image", {
          headers: {
            Authorization: `Bearer ${token}`,
          },
          method: "POST",
          body: formData,
        });
      }

      // uploading product
      const res = await fetch("/product", {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        method: "POST",
        body: JSON.stringify({
          title,
          desc,
          category,
          img: filename,
          price,
          review,
        }),
      });

      const food = await res.json();

      navigate(`/food/${food._id}`);
    } catch (error) {
      console.error(error.message);
    }
  };

  return (
    <div className="create-container">
      <div className="create-wrapper">
        <h2 className="create-title">Create food</h2>
        <form onSubmit={handleCreateProduct} encType="multipart/form-data">
          <div className="create-inputWrapper">
            <label>Title: </label>
            <input
              type="text"
              placeholder="Title..."
              className="create-input"
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
          <div className="create-inputWrapper">
            <label>Description: </label>
            <input
              type="text"
              placeholder="Description..."
              className="create-input"
              onChange={(e) => setDesc(e.target.value)}
            />
          </div>
          <div className="create-inputWrapper">
            <label>Category: </label>
            <input
              type="text"
              placeholder="Category..."
              className="create-input"
              onChange={(e) => setCategory(e.target.value)}
            />
          </div>

          <div className="create-inputWrapper">
            <label>Price: </label>
            <input
              type="number"
              step={0.01}
              placeholder="Price..."
              className="create-input"
              onChange={(e) => setPrice(e.target.value)}
            />
          </div>
          <div className="create-inputWrapper">
            <label>Review: </label>
            <input
              type="number"
              step={0.1}
              min={1}
              max={5}
              placeholder="Review..."
              className="create-input"
              onChange={(e) => setReview(e.target.value)}
            />
          </div>
          <div className="create-inputWrapperImage">
            <label htmlFor="image" className="create-labelFileInput">
              Image: <span>Upload here</span>
            </label>
            <input
              type="file"
              id="image"
              placeholder="Image..."
              className="create-input"
              onChange={onChangeFile}
              style={{ display: "none" }}
            />
            {image && (
              <p className="create-imageName">
                {image.name}{" "}
                <AiOutlineCloseCircle
                  onClick={handleCloseImg}
                  className="create-closeIcon"
                />
              </p>
            )}
          </div>
          <div className="create-buttonWrapper">
            <button type="submit" className="create-submitBtn">
              Submit
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Create;

这个是multer的Controller页面—— uploadController.js

const uploadController = (req, res) => {
  try {
    return res.status(201).json({ msg: "Successfully uploaded file" });
  } catch (error) {
    console.error(error.message);
  }
};

module.exports = { uploadController };

这是路由器文件 - router.js

const express = require("express");
const multer = require("multer");

const {
  verifyToken,
  verifyTokenAdmin,
} = require("../middlewares/authmiddleware");
//Controller from productController file
const {
  getProductController,
  getoneProductController,
  createproductController,
} = require("../controllers/productController");

// Use multer for uploading file
const storage = multer.diskStorage({
  destination: (req, res, cb) => {
    cb(null, "public/images");
  },
  filename: (req, file, cb) => {
    cb(null, req.body, filename);
  },
});

const upload = multer({
  storage,
  //same as storage: storage
});

//Controller from uploadController file
const { uploadController } = require("../controllers/uploadController");
//POST || create product
router.post("/product", verifyTokenAdmin, createproductController);

//Image routes
//POST || upload image
router.post("/image", verifyToken, upload.single("image"), uploadController);

module.exports = router;

我得到的错误是：