Question

我正在尝试将表单数据发送到托管在heroku上的API。在API上，我捕获了空的输入字段错误。看来我正确发送了数据（我认为）。但是我继续收到此错误消息，我知道这是来自API的响应，因为它是自定义错误：

{
    "message": {
        "typeofincident": "Type field is required"
    }
}

以下是我的JavaScript代码：

function postIncident(e) {
  e.preventDefault();
  let token = sessionStorage.getItem('token');
  let formdata = new FormData();
  formdata.append("typeofincident", 'typeofincident', document.getElementById('record_type').value);
  formdata.append("description", document.getElementById('description').value);
  formdata.append("location", document.getElementById('location').value);
  formdata.append('file', document.getElementById("media").files[0]); 
  fetch('https://issaireporterv2.herokuapp.com/api/v2/incidents', {
      method: 'POST',
      body: formdata,
      headers: {
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/x-www-form-urlencoded',
        'content-type': 'multipart/form-data'
      }
    })
    .then(res => res.json())
    .then(data => {
      if (data.Message) {
        alert(data.Message)
      } else {
        alert(data.Error)
      }
    })
}

请求有效负载如下：


------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="typeofincident"


------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="description"

theft
------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="location"

Latitude: -1.2094403999999999 Longitude: 36.8949247
------WebKitFormBoundaryPoo9tZT7joBLu8YB
Content-Disposition: form-data; name="file"; filename="user view.png"
Content-Type: image/png


------WebKitFormBoundaryPoo9tZT7joBLu8YB--

谁能协助我做错事情？谢谢！

Answer 1

您两次设置Content-Type。

一旦您声称它是application / x-www-form-urlencoded，就不是。

然后您声称它是multipart / form-data，但是您没有指定边界（WebKitFormBoundaryPoo9tZT7joBLu8YB…并不是您可以知道将为您生成什么边界），因此无法对其进行解析。

不要覆盖fetch API生成的Content-Type。

香草javascript Fetch API表格数据上传

1 个答案: