在 ReactJs 中使用 axios 发送 POST 请求时 $_FILES 为空

Posted 2023-02-22

【中文标题】在 ReactJs 中使用 axios 发送 POST 请求时 $_FILES 为空

【英文标题】：$_FILES is empty when sending a POST request using axios in ReactJs

【发布时间】：2020-10-17 14:53:50

【问题描述】：

我有一个文件数组，我想在 php 中检索这些文件以及其他一些字符串参数，当我从 React 中的 FormData 发送文件时，它们在 php 中作为 json 接收：

 ""dataForm":"Files":["path":"aust.jpeg"],"headers":"content-type":"multipart/form-data""

出于显而易见的原因，我想在 $_FILES 中接收它们，是否可以这样做并将其余参数读取为 php 中的 json ？此外，我的 php.ini 已完全配置为允许文件上传

这是 Reactjs 代码：

import axios from 'axios';

  const sendMail = (data, uploadedFiles) => 
  const dataForm = new FormData();
  dataForm['Files'] = uploadedFiles; // Here uploadedFiles is an array of files
  console.log(dataForm['Files'])
  axios.post('http://localhost/bickdata/mail/SendMail.php', 
    dataForm,
    headers: 
      'content-type': 'multipart/form-data'
  
  ) .then(function (response) 
    console.log(response);
  );

提前致谢！

【问题讨论】：

不是 PHP 专家，但不应该是 dataForm.append('Files[]', uploadedFiles) ？

你是对的@ludwiguer，因为我正在处理一组文件，我发布了解决方案，结果 axios.post() 默认将所有数据作为 JSON 发送。感谢您的帮助！

【参考方案1】：

这就是你在 React 中上传多个文件的方式

const dataForm = new FormData();
uploadedFiles.map(file => 
    dataForm.append("Files[]", file);

【参考方案2】：

原来axios.post() 默认情况下将所有数据作为 JSON 发送，这就是为什么文件没有被解释为 php 中的文件对象的原因，我对 post 请求做了一些小改动，我终于收到了我的文件，这是更新的代码：

（我现在只从数组中发送一个文件，但我很确定对于一组文件来说这是相同的过程）

  dataForm.append( 
    "potato", 
    uploadedFiles[0], 
    uploadedFiles[0].name 
  ); 

  axios(
    method: 'post',
    url: 'http://localhost/bickdata/mail/SendMail.php',
    data: dataForm,
    headers: 'Content-Type': 'multipart/form-data' 
    )
    .then(function (response) 
        //handle success
        console.log(response);
    )
    .catch(function (response) 
        //handle error
        console.log(response);
    );

【参考方案3】：

在我的例子中，它是 php.ini 中的 2MB upload_max_filesize。请参见 PHP - empty $_POST and $_FILES - when uploading larger files 我把头发拉了2个小时。 Axios 没有任何问题。我不需要指定标题。