xhr envía cadena base64 y decodifícala en el server a un file

Estoy tratando de enviar un img codificado en base64 al server, el javascript se ve como

var xhr=new XMLHttpRequest() var reader=new FileReader() reader.onloadend=function(e){ xhr.onload=function(e){ alert(xhr.responseText) } xhr.open("POST","upload.php"); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); //xhr.setRequestHeader("X-File-Name", file.name); //xhr.setRequestHeader("X-File-Type",file.type) xhr.send(e.target.result) } reader.readAsDataURL(file) },false) 

En php, se ve así:

 echo "some response Text"; $postdata = file_get_contents("php://input"); file_put_contents('MyFile.jpg', base64_decode($postdata)); 

Y, finalmente, el server obtiene un file exactamente tan grande como el file enviado. Sin embargo, no se puede abrir.
¿Alguien tiene algunas ideas? ¡Muchas gracias!

One Solution collect form web for “xhr envía cadena base64 y decodifícala en el server a un file”

 reader.readAsDataURL(file) 

Una URL de datos NO es lo mismo que una versión base64 del file. Obtienes basura extra en ella. Se parece a esto:

 data:[<MIME-type>][;charset=<encoding>][;base64],<data> 

Ver Wikipedia .

Intenta hacer una expresión regular simple en él:

 var data = dataURL.match(/,(.*)$/)[1]; 

O, en tu código,

 xhr.send(e.target.result.match(/,(.*)$/)[1]); 
  • Comprender XMLHttpRequest sobre CORS (responseText)
  • Javascript & https - Objeto XMLHttpRequest para la ruta relativa GET - ¿el protocolo / puerto es 'henetworkingado'?
  • XMLHttpRequest 206 Parcial Content
  • Arquitectura AJAX y cliente-server con JavaScript
  • Captura de error de contenido mixto
  • Averigüe cuánto tardó una request de Ajax para completar
  • dominio cruzado XMLHttprequest
  • AWS S3 - OPCIONES CORS Preflight arrojando 400 Bad Request durante DELETE con VersionId
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.