React：無法將文件發送到后端

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：

body: headerimage,