Estoy haciendo una solicitud axios.post() en mi componente Vue para enviar algunos datos de formulario que contienen un archivo multimedia para cargar a través de un script PHP. Sé que el objeto del archivo se agrega correctamente cuando registro los datos antes de la solicitud aquí:
// 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); }Esto registra la información del objeto de archivo y el tipo de medio correspondiente como se esperaba.
// 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 1Luego paso estos datos a través de una solicitud de axios y registro los datos de respuesta de la siguiente manera:
// 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(); }Esto es lo que se registra:
media: Array(1) 0: {} length: 1 [[Prototype]]: Array(0) mediaType: ['1']Por lo tanto, está pasando la matriz de medios, pero el archivo real no se está pasando, como puede ver en el objeto vacío en el índice 0. Como puede ver, el tipo de medio se pasa correctamente, tenga en cuenta que tanto 'medios' como 'tipo de medios' son matrices para admitir la carga de varios archivos. ¿Me estoy perdiendo de algo? ¿Por qué se pierden los datos del archivo cuando los paso a través de formData?