Реакция: Невозможно отправить файл на сервер

Question

Я пытаюсь отправить изображение на сервер, но получаю ошибку.

Я пытаюсь сделать это так:

SignupPublicProfileAPICall({
   headerimage: startupFourthStepForm.headerimage
})
...

          <FormFieldFile
            type="file"
            onChange={e => {
              startupFourthStepFormActionHandler({
                headerimage: e.target.files[0],
              });
            }}
          />

Я отправляю вот что:

lastModified: 1559082933991
lastModifiedDate: Tue May 28 2019 16:35:33 GMT-0600 (Central Standard Time) {}
name: "010919_North-Park_Guava-Queen_Front-View_a072fdd7-f1e9-4ee9-aae6-97b7bb5c2b54_800x454.png"
size: 127234
type: "image/png"
webkitRelativePath: ""

Но странная вещь, которую я вижу, это то, что я делаю что-то вроде этого:

setState({ headerimage: startupFourthStepForm.headerimage });

И затем я регистрирую console.log(state.headerimage) Я получаю пустой объект{}.

Это тело вызова извлечения:

      body: JSON.stringify({
        headerimage,
      }),

Почему?

Answer 1

Вы должны создать объект FormData вместо stringifing headerImage.

<FormFieldFile
            type="file"
            onChange={e => {
              let formData = new FormData();
              formData.append('file', e.target.files[0]); // set the proper name of property

              startupFourthStepFormActionHandler({
                headerimage: formData
              });
            }}
          />

и затем в вызове fetch просто замените тело следующим:

body: headerimage,