Как сделать POST запрос c form-data как в Postman?

Question

Пытаюсь сделать post запрос с form-data как в Postman, но не удается загрузить изображение(picture). Сам ответ на запрос в Postmane выглядит так:

В ответ сервер выводит созданный объект и в picture занесено сгенирированое название файла.

Значения полей я считываю с инпутов и возвращаю обьект типа FormData:

 const readNewValues = (target, _id = null) => {
  let name = target.querySelector(".report__title").value;
  let keyWords = target.querySelector(".report__key-words").value;
  let content = target.querySelector(".report__content").value;
  let picture = target.querySelector(".report__picture").files[0].name;
  let pageCount = target.querySelector(".report__page-count").value;
  let creationDate = target.querySelector(".report__creation-date").value;
  let newFormDataReport = new FormData();
  newFormDataReport.append("_id", _id);
  newFormDataReport.append("name", name);
  newFormDataReport.append("keyWords", keyWords);
  newFormDataReport.append("content", content);
  newFormDataReport.append("picture", picture);
  newFormDataReport.append("pageCount", pageCount);
  newFormDataReport.append("creationDate", creationDate);
  return newFormDataReport;
  
};

Затем возвращенный FormData объект я отправляю по запросу:

const addNewReport = async (createdReport) => {
  const result = await fetch(`http://localhost:3000/api/reports`, {
    method: "POST",
    headers: { "Content-Type": "multipart/form-data" },
    body: createdReport,
  });
  const report = await result.json();
  return report;
};

На бэкэнд части с помощью обьектов класса ReportController и ReportService считываю данные и заношу в бд:

class ReportController {
  create = async (req, res) => {
    try {
      const report = await ReportService.create(req.body, req.files.picture);
      res.json(report);
    } catch (error) {
      res.status(500).json(error.message);
    }
  };
}

class ReportService {
      create = async (report, picture) => {
        const fileName = FileService.saveFile(picture);
        const createdReport = await Report.create({ ...report, picture: fileName });
        return createdReport;
      };
}

Но при попытке отправления POST запроса, получаю ошибку.

Answer 1

Решением оказалось добавление обычной формы:

<form method="POST" enctype="multipart/form-data" id="uploadForm">
      <input type="text" name="name" />
      <input type="text" name="keyWords" />
      <input type="text" name="content" />
      <input type="file" name="picture" />
      <input type="text" name="pageCount" />
      <input type="date" name="creationDate" />
      <input type="submit" />
 </form>

Отмена стандартного поведения формы при отправке:

 uploadForm.addEventListener("submit", async (e) => {
  e.preventDefault();
}

И отправка POST запроса без заголовков:

 const addNewReport = async (createdReport) => {
  const result = await fetch(`http://localhost:3000/api/reports`, {
    method: "POST",
    body: createdReport,
  });
};

Как отменить стандартное поведение отправки формы при создании собственной формы вручную через:

  let newFormDataReport = new FormData();
  newFormDataReport.append("name", name);

Я так и не понял.

БЛОГ НА HUSL

Как сделать POST запрос c form-data как в Postman?

Ответы (1 шт):