Te cuento algo
Para enviar archivos a través de AJAX con Fetch deberías enviar tus datos con un FormaData y el header Content-Type
con el valor multipart/form-data
Como en el siguiente ejemplo:
<input type="file" id="myFile" name="myFile">
<button id="send">Enviar</button>
// Obtenemos una referencia al input tipo file
const myFileElement = document.querySelector('#myFile');
// Obtenemos una referencia al botón de enviar
const sendBtn = document.querySelector('#send');
// Aqui guardaremos el archivo
let myFile = null;
// Obtenemos el file en cuanto te agregue uno nuevo al input
myFileElement.addEventListener('change', event => {
myFile = event.target.files[0]
});
sendBtn.addEventListener('click', event => {
// Prevenimos cualquier acción por defecto del boton
event.preventDefault();
// Creamos el FormData y le añadimos un campo
const formData = new FormData();
formData.append('myFile', myFile);
// Enviamos la solicitud AJAX de tipo POST
fetch('php.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
},
body: formData
})
.then(res => {
// Imprimimos la respuesta
console.log(res.json())
});
});
Y del lado del servidor con PHP hacemos lo siguiente:
<?php
// Se establece el tipo de contenido de la respuesta
header('Content-Type: application/json');
// La variable global $_FILES contiene los archivos subidos
if (isset($_FILES) && count($_FILES) > 0 && isset($_FILES['myFile'])) {
http_response_code(200);
echo json_encode($_FILES['myFile']);
}
else {
http_response_code(400);
echo json_encode([
'message' => 'Error, no se encontro ningun archivo'
]);
}
Ese sería un ejemplo algo completo de como sería el proceso, si quieres devolver el archivo completo, por ejemplo en formato data-uri
el proceso es un poco distinto.
Respuesta extendida: ¿Como enviar archivos con por AJAX en formato json?
Como te decía en los comentarios el uso de un FormaData para enviar archivos al servidor funciona muy bien pero en caso de que necesites enviarlos en formato json hay una alternativa
Y es la siguiente:
// Obtenemos una referencia al input tipo file
const myFileElement = document.querySelector('#myFile');
// Obtenemos una referencia al botón de enviar
const sendBtn = document.querySelector('#send');
// Aqui guardaremos el archivo
let myFile = null;
let base64 = null;
// Obtenemos el file en cuanto te agregue uno nuevo al input
myFileElement.addEventListener('change', event => {
myFile = event.target.files[0]
});
sendBtn.addEventListener('click', event => {
// Prevenimos cualquier acción por defecto del botón
event.preventDefault();
// Creamos un FileReader para obtener el Base64 del archivo
const fileReader = new FileReader();
fileReader.addEventListener('load', () => {
base64 = fileReader.result.replace(/^data:(.+)\/(.+);base64,/i, '');
});
fileReader.readAsDataURL(myFile);
// Enviamos la solicitud AJAX de tipo POST
fetch('php.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
archivo: {
name: myFile.name,
type: myFile.type,
content: base64
}
})
})
.then(res => {
// Imprimimos la respuesta
console.log(res.json())
});
});
Y en ese caso del lado de PHP haremos lo siguiente:
<?php
// Se establece el tipo de contenido de la respuesta
header('Content-Type: application/json');
// Obtenemos los valores enviados a través de AJAX
$json_post = json_decode(file_get_contents('php://input'), true) ?? null;
// En este caso el archivo no estará en $_FILES sino en en la URL php://input
if (!is_null($json_post) && isset($json_post['archivo'])) {
http_response_code(200);
echo json_encode($json_post['archivo']);
}
else {
http_response_code(400);
echo json_encode([
'message' => 'Error, no se encontro ningun archivo'
]);
}
La Clase de Javascript usada para leer obtener el base64 del archivo es FileReader. Básicamente nos permite leer un Blob
o File
como data-uri, que es un formato de URL que trae el binario del archivo y su tipo incrustado en la URL y parseado a base64.
Nota extra: ¿Cómo hacer para almacenar el archivo en este caso?
Bien en ese caso solo haremos lo siguiente:
<?php
// Obtenemos los valores enviados a través de AJAX
$json_post = json_decode(file_get_contents('php://input'), true) ?? null;
// En este caso el archivo no estará en $_FILES sino en en la URL php://input
if (!is_null($json_post) && isset($json_post['archivo'])) {
// Creamos el archivo y obtenemos su resource
$file = fopen($json_post['archivo']['name'], 'w+');
// Parseamos a binario el base64
$bin = base64_decode($json_post['archivo']['content']);
// Escribimos el archivo
fwrite($file, $bin);
// Cerramos el archivo
fclose($file);
}