I am making an axios.post() request in my Vue component to send some formData holding a media File to upload through a PHP script. I know the file object is being appended correctly as I log the data before the request here:

// this.postMedia is a Vue array holding any post media objects to be uploaded
this.postMedia.forEach((mediaObj, index) => {
    formData.append('media[' + index + ']', mediaObj.media);
    formData.append('mediaType[' + index + ']', mediaObj.mediaType);
});

// Logging formData
for (let p of formData.values()) {
    console.log(p);
}

This logs the information of the file object and the corresponding media type as expected.

// This is the media data
File {
    lastModified: 1627299857401
    lastModifiedDate: Mon Jul 26 2021 07:44:17 GMT-0400 (Eastern Daylight Time) {}
    name: "test-image.jpg"
    size: 12295
    type: "image/jpeg"
    webkitRelativePath: ""
}

// This is the mediaType data
1

I am then passing this data through an axios request and logging the response data as follows:

// Vue.js file
axios.post('/api/createPostV2', formData, config)
.then(success => {
    console.log(success.data);
})
.catch(function(err) {
    console.log(err.response);
});


// PHP file being requested (/api/createPostV2)
public static function createPostV2(Request $request)
{
    // Just return request to check data
    return $request->all();
}

Here is what gets logged:

media: Array(1)
    0: {}
    length: 1
    [[Prototype]]: Array(0)
mediaType: ['1']

So it is passing the media array, but the actual file is not being passed as you can see by the empty object at index 0. As you can see the mediaType is passed correctly, keep in mind both 'media' and 'mediaType' are arrays to support uploading multiple files. Am I missing something here? Why is the file data being lost when I am passing it through formData?