为什么我没有通过发送 axios.put 请求在服务器端接收数据

Question

我在 reactjs.Axios.get 中使用 Axios Api 对我来说工作正常，但我遇到了 axios.put 的问题，当我使用简单对象发送请求时，我得到了正确的响应，但是当我发送请求表单数据时，我得到了响应为空。

当我使用工作正常的简单对象发送请求时：

  const data= {ProductName:"Dummy"};
const apiurl = `http://localhost/testapi/index.php/api/products/product`;
axios.put(apiurl, data).then(response => {
  console.log(response.data);
});

服务器端：

 public function product_post()
{
    $data = array();
    $data['ProductName'] = $this->post('ProductName');
    $this->response(
        [
            'status' => "ok",
            'message' => "Data inserted successfully",
            'info' => $data['ProductName']
        ],
        REST_Controller::HTTP_OK
    );
}

我得到的正确答案是“Dummy”

当我使用无法正常工作的 Formdata 发送请求时：

  var data= new FormData();
data.set("ProductName","Dummy");
const apiurl = `http://localhost/testapi/index.php/api/products/product`;
await axios.put(apiurl, data).then(response => {
  console.log(response.data);
});

服务器端：

 public function product_post()
{
    $data = array();
    $data['ProductName'] = $this->post('ProductName');
    $this->response(
        [
            'status' => "ok",
            'message' => "Data inserted successfully",
            'info' => $data['ProductName']
        ],
        REST_Controller::HTTP_OK
    );
}

现在我收到的 $data['ProductName'] 响应为空。 还有一件事，我还尝试使用 formdata 发送文件，但得到了 null

请告诉我代码有什么问题。

Answer 1

您需要使用 append 方法向 FormData 添加新的键和值

改变

  data.set("ProductName","Dummy");

到

  data.append("ProductName","Dummy");

编辑：

您需要在标题中指定要发送 FormData，因为该内容类型应该是 multipart/form-data。试试下面的代码

   var data= new FormData();
     data.append("ProductName","Dummy");
     const config = {     
         headers: { 'content-type': 'multipart/form-data' }
     }
     const apiurl = `http://localhost/testapi/index.php/api/products/product`;
    await axios.put(apiurl, data, config).then(response => {
       console.log(response.data);
    });