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

Question

I have an array of Files that i want to retrieve in php along with some other string params, When i send the file(s) from the FormData in React they're being received as json in php:

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

I want to receive them in $_FILES instead for obvious reasons, is it possible to do that and read the rest of the params as json in php? Also my php.ini is fully configured to allow file uploads

Here is the Reactjs code:

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);
  });
}

Thanks in advance !

Answer 1

Turns out axios.post() sends all the data as JSON by default which is why the files are not being interpreted as File objects in php, I did some minor changes with the post request and i finally received my files, here's the updated code:

(i'm only sending one file from the array for now, but i'm pretty sure it's the same procedure for an array of files)

  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);
    });

Answer 2

This is how you upload multiple files in React

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

Answer 3

In my case, it was 2MB upload_max_filesize in php.ini. Please see PHP - empty $_POST and $_FILES - when uploading larger files I pulled out my hair for 2 hours. Nothing wrong with Axios. I didn't need to specify headers.

Answer 4

Ref MDN Web Docs , the FormData's encoding type were set to multipart/form-data . Taking the sample code cue, I managed to upload a file with this:

const api = axios.create({ baseURL: '<?php $this->getUrl() ?>' })
editPost = function(e) {
    // target is the input element
    const target = typeof e === 'string' ? document.querySelector(e) : e.target;
    let form = new FormData();
    form.append(target.name, target.type == 'file' ? target.files[0] : target.value);
    form.append('sid', '<?php echo $this->getSessionId() ?>');
    api.post('/editPost', form)
        .then((response) => {
            //...
        })
        .catch(() => {
            //...
};