I want to do pretty simple thing. Send image via HTTP to my PHP backend. However the $_FILES
array remains empty.
My frontend looks like this:
const formData = new FormData(); formData.append('image', this.newPhoto);await fetch('http://localhost:8080/addArticle', { method: 'POST', headers: {'Content-Type': 'multipart/form-data','Access-Control-Allow-Origin': '*','Access-Control-Allow-Headers': '*', }, body: formData, }) .then((response) => console.log(response)) .catch((error) => console.log(error));
My payload in Network Tab on Dev Tools is looking like this: first time sending Images, so not really sure whether it looks correctly.
And on server side just simply try to see this files now via
var_dump($_FILES);
https://i.sstatic.net/KrN63.pngWhat am i missing?
In HTML it looks like this. I am using Vuetify library for Vue:
<v-file-input v-model="newPhoto" show-size accept="image/*" label="Photo"></v-file-input>
Console log of example photo: