«Как исправить Не удалось загрузить ресурс: сервер ответил со статусом 500 в React и экспресс

Question

Я попытался загрузить изображение в локальную папку с помощью multer и React. Я надеюсь на успешную загрузку изображения. Однако, как сказал отладчик chrome, Ошибка загрузки ресурса: сервер ответил со статусом 500 (Внутренняя ошибка сервера) [http://localhost:3000/] Я предполагаю, что мой код отправляет неверный формат данных на стороне сервера. Я очень ценю, если вы дадите мне решение для этого. Я провожу целые дни, чтобы заняться этим вопросом.

Реагировать

const TopPage = () => {
  const [imageState, setImageState] = useState({
    imageName: "",
    imageData: ""
  });

  const onChange = e => {

    setImageState({
      imageName: "lovelove" + Date.now(),
      imageData: e.target.files[0]
    });
  };

  const onClick = async () => {
    const { imageName, imageData } = imageState;
    console.log(imageName);
    console.log(imageData);

    const fd = new FormData();
    await fd.append("imageName", imageName);
    await fd.append("imageData", imageData);

    await axios.post("/", fd, (res, req) => console.log(res));

  };

  return (
    <div enctype="multipart/form-data" action="/" method="post">
      <input type="file" onChange={e => onChange(e)} />
      <button onClick={onClick}>Submit</button>
      <img src={imageState.defaultImage} />
    </div>
  );
};

Сервер

router.post("/", upload.single("myFile"), (req, res, next) => {
  console.log(req.file);

  if (!req.file) return res.send("Please upload a file");
  const newImage = new Image({
    imageName: req.body.imageName,
    imageData: req.file.path
  });
  newImage
    .save()
    .then(result => {
      console.log(result);
      res.status(200).json({
        access: true,
        document: result
      });
    })
    .catch(err => next(err));
});

Answer 1

Если вы уже установили Multer, если вы видите следующий код

router.post("/", upload.single("myFile"), (req, res, next) => {
  console.log(req.file);

"myFile" должно быть именем ядра formField, отвечающим передаваемому файлу, который в вашем случае равен "imageData". Попробуйте заменить "myFile" на "imageData".

Также установите заголовки для пост-запроса axios, получаемого из реакции. Атрибуты формы могут не повлиять на http-запросы вручную

var header = {
        'Content-Type': 'multipart/form-data'
    }

await axios.post("/", fd,{ headers : header });

Попробуйте и дайте мне знать, если это работает.