Node/React：我無法使用multer上傳帶有我的帖子的影像

我正在嘗試創建一個小型社交網路，我們可以在其中發送帖子（帶或不帶影像）。

我設法創建了沒有影像（只有文本）的帖子，效果很好，但是一旦我將影像添加到表單并提交表單，就無法找到影像。通常它應該保存在“影像”檔案夾中，但它總是空的。

我正在使用 multer 來做到這一點，這是我的代碼：

我的表單組件：

const WhatsUpForm = ({ className, id, name, placeholder }) => {
  const [inputValue, setInputValue] = useState("");

  const inputHandler = (e) => {
    setInputValue(e.target.value);
  };

  const submitHandler = async (e) => {
    e.preventDefault();
    const post = {
      author_firstname: JSON.parse(localStorage.getItem("user")).user_firstname,
      author_lastname: JSON.parse(localStorage.getItem("user")).user_lastname,
      message: inputValue,
      date_creation: dayjs().format(),
      image_url: ""
    };

    // POST request
    await POST(ENDPOINTS.CREATE_POST, post);

    // document.location.reload()
  };

  return (
    <form className={className} onSubmit={submitHandler} method="POST" action="/api/post" enctype="multipart/form-data">
      <input className="testt" type="text" id={id} name={name} placeholder={placeholder} required  value={inputValue} onChange={inputHandler}/>
      <div className="icons_container">
        <input type="file" name="image" id="image" className="icons_container__add_file" />
        <label for="image">
          <FontAwesomeIcon icon={faImages} />
        </label>
        <button type="submit" className="icons_container__submit">
          <FontAwesomeIcon icon={faPaperPlane} />
        </button>
      </div>
    </form>
  );
};

我的路線和multer的代碼：

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

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, "../images");
  },
  filename: (req, file, callback) => {
    console.log("multer");
    console.log("file :", file);
    callback(null, Date.now()   path.extname(file.originalname));
  },
});

const upload = multer({ storage: storage });

// Post CRUD
router.get("/", auth, postCtrl.getAllPosts);
router.post("/", auth, upload.single("image"), postCtrl.createPost);
router.delete("/:id", auth, postCtrl.deletePost);

router.put("/:id", auth, postCtrl.updatePost);

console.log("multer") 不是觸發器，當我在瀏覽器的網路選項卡中查看有效負載時，我看不到任何影像。

最后，我的 createPost 函式控制器：

exports.createPost = (req, res, next) => {
  let { body } = req;
  delete(req.body.image_url)
  body = {
    ...body,
    likes: "",
    
  };
  const sql = "INSERT INTO posts SET ?";
  db.query(sql, body, (err, result) => {
    if (err) {
      res.status(404).json({ err });
      throw err;
    }
    res.status(200).json({ msg: "Post added..." });
  });
};

現在，我不想將影像的 URL 放在我的 SQL DB 中，我只想將影像保存在我的影像檔案夾中。我已經驗證了路徑 (../images) 并且它是正確的。如何將影像保存在我的影像檔案夾中？

uj5u.com熱心網友回復：

我沒有看到檔案資料從您的 POST 請求發送到服務器。

 // object post doesn't have the file data
  await POST(ENDPOINTS.CREATE_POST, post);

考慮使用 FormData

 const submitHandler = async (e) => {
    e.preventDefault();
    const post = new FormData();
    // non form data
    formData.append("author_firstname", JSON.parse(localStorage.getItem("user")).user_firstname);
    ...
    
    // form data
    formData.append("image",    document.getElementById("image").files[0]);
    ...
    
    // POST request
    await POST(ENDPOINTS.CREATE_POST, post);

    // document.location.reload()
  };

標籤：节点.js 表达 多路

上一篇：當我嘗試檢索影像時，Ingress/NginxNodeJSExpressMultipleGET失敗

下一篇：Firebase函式決議請求正文，然后我才能在Express中處理它