如何在 React 上使用 axios 执行发布请求并将您的数据作为 FormData 传递？答案

【问题标题】：How to perform a post request with axios on React and pass your data as FormData?如何在 React 上使用 axios 执行发布请求并将您的数据作为 FormData 传递？
【发布时间】：2020-12-06 04:04:52
【问题描述】：

有这个 API：http://zssn-backend-example.herokuapp.com/api/，详细在这里：http://zssn-backend-example.herokuapp.com/swagger-api/index.html#!/people/Api_People_index。我正在尝试在此端点“/people/{person_id}/properties/trade_item.json”上执行 POST 请求（在幸存者之间进行交易）。在测试网站上，我用以下数据填写了字段并得到了 204 响应：

person_id:34e183a6-965e-4a61-8db5-5df9103f4d4b

消费者[姓名]：Person4

消费者[pick]：AK47：1；金宝汤：1

消费者[支付]：急救袋：2

我调查了一下，得到了 this information

不理解“PROPERTY[KEY]:VALUE”表示

当我尝试使用此代码请求请求时，使用相同的值（顺便说一下，此 API 的数据库每 24 小时清除一次，因此这些值可能不起作用，即使您以正确的方式执行此操作）：

这是我的代码：

    async function handleTrade(e){

   e.preventDefault();

     const config = {
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
       },
     };
     await api.post(
       "/people/" + match.params.id + "/properties/trade_item.json",
       {
         person_id:match.params.id,
         name: survivorRef.current,
         pick: survivorItemsToPick,
         payment: userItemsToPay,
       },
       config
     );

这就是我得到的：要求： request-description

回应： response-description

我怎样才能以正确的方式提出这个请求以获得与第一张图片相同的结果？

【问题讨论】：

标签： reactjs post request axios form-data

【解决方案1】：

可以使用FormData发送请求，我做了一个例子：

const data = new FormData();
data.append("customer[name]", "Person4");   
data.append("customer[pick]", "AK47:1");         
await api.post("/people/" + match.params.id + "/properties/trade_item.json", data, config)

【讨论】：