Estoy tratando de enviar archivos y datos por formData desde Vue usando axios por el metodo post, ya que debo enviar el archivo y los datos en la misma petición, pero al momento de capturarlos en mi Código PHP, no puedo leer los datos, pero el archivo si lo puedo leer perfectamente.
Comparto mi template de Vue
<input class="form-control" type="number" v-model="pqr.documento" id="pqr_documento"
placeholder="N° de documento"/>
<input type="file" class="form-control-file" id="exampleFormControlFile1" @change="onFileChange" multiple/>
Comparto mi código JS en Vue
data() {
return {
selectedFiles: [],
sizeSelectedFiles: 0,
pqr: {
documento: "",
}
}
},
methods: {
enviarPQR: async function() {
this.showProgress = true;
let formData = new FormData();
formData.append("file", this.selectedFile);
formData.append("pqr_documento", this.pqr.documento);
for (var i = 0; i < this.sizeSelectedFiles; i++) {
formData.append("file[]", this.selectedFiles[i]);
}
let vue = this;
await this.axios.post("pqr.php?dato=insertarpqrweb", formData,
{ headers: { "Content-Type": "multipart/form-data" } })
.then(function(response) {
console.log("RESPONSE API: " + response.data);
})
.catch((error) => {
this.$utilidad.printConsole(error);
})
.then(function() {
vue.showProgress = false;
});
},
onFileChange(event) {
this.sizeSelectedFiles = event.target.files.length;
this.selectedFiles = event.target.files;
}
}
Comparto mi código PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: GET, POST, PUT");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers,
Authorization, X-Requested-With");
$_POST = file_get_contents("php://input");
$documento = $_POST['pqr_documento'];
echo 'RESP DATA: ' . $documento;
foreach ($_FILES['file']['name'] as $key => $val) {
$nombre = $_FILES['file']['name'][$key];
print_r('RESP FILE: ' . $nombre);
}
Salida por consola:
RESPONSE API:
RESP DATA:
RESP FILE: archivo.pdf
Evidentemente desde PHP pude recibir el nombre del archivo pero no he podido recibir los datos que encapsulé en el FormData desde vuejs
var_dump($_POST);
uno antes y otro después de esta línea:$_POST = file_get_contents("php://input");
y dinos qué muestra.