referenciar - qué es un script de javascript externo

¿Cómo convertir dataURL a objeto de archivo en javascript?

Question

Necesito convertir un dataURL a un objeto File en Javascript para poder enviarlo utilizando AJAX. ¿Es posible? Si es así, por favor dime cómo.

Answer 1

Después de algunas investigaciones llegué a este:

function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn''t handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split('','')[1]);
// separate out the mime component
var mimeString = dataURI.split('','')[0].split('':'')[1].split('';'')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var dw = new DataView(ab);
for(var i = 0; i < byteString.length; i++) {
dw.setUint8(i, byteString.charCodeAt(i));
}
// write the ArrayBuffer to a blob, and you''re done
return new Blob([ab], {type: mimeString});
}
module.exports = dataURItoBlob;

Answer 2

Si necesita enviarlo a través de ajax, entonces no es necesario usar un objeto File , solo se necesitan los objetos Blob y FormData .

Como mencioné, ¿por qué no simplemente envías la cadena base64 al servidor a través de ajax y la conviertes al lado del servidor binario, usando el base64_decode de PHP, por ejemplo? De todos modos, el código que cumple con el estándar de esta respuesta funciona en los nocturnos de Chrome 13 y WebKit:

function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn''t handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split('','')[1]);
// separate out the mime component
var mimeString = dataURI.split('','')[0].split('':'')[1].split('';'')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
//Old Code
//write the ArrayBuffer to a blob, and you''re done
//var bb = new BlobBuilder();
//bb.append(ab);
//return bb.getBlob(mimeString);
//New Code
return new Blob([ab], {type: mimeString});
}

Luego simplemente agregue el blob a un nuevo objeto FormData y publíquelo en su servidor usando ajax:

var blob = dataURItoBlob(someDataUrl);
var fd = new FormData(document.forms[0]);
var xhr = new XMLHttpRequest();
fd.append("myFile", blob);
xhr.open(''POST'', ''/'', true);
xhr.send(fd);

Answer 3

BlobBuilder está en desuso y ya no debe usarse. Usa Blob lugar de BlobBuilder antiguo. El código es muy limpio y simple.

El objeto de archivo se hereda del objeto Blob. Puedes usar ambos con el objeto FormData.

function dataURLtoBlob(dataurl) {
var arr = dataurl.split('',''), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}

use la función dataURLtoBlob () para convertir dataURL a blob y envíe ajax al servidor.

por ejemplo:

var dataurl = ''data:text/plain;base64,aGVsbG8gd29ybGQ='';
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("file", blob, "hello.txt");
var xhr = new XMLHttpRequest();
xhr.open(''POST'', ''/server.php'', true);
xhr.onload = function(){
alert(''upload complete'');
};
xhr.send(fd);

De otra manera:

También puede usar fetch para convertir una url en un objeto de archivo (el objeto de archivo tiene la propiedad name / fileName, esto es diferente del objeto blob)

El código es muy corto y fácil de usar. (works in Chrome and Firefox)

//load src and convert to a File instance object
//work for any type of src, not only image src.
//return a promise that resolves with a File instance
function srcToFile(src, fileName, mimeType){
return (fetch(src)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], fileName, {type:mimeType});})
);
}

Ejemplo de uso 1: simplemente convertir a objeto de archivo

srcToFile(
''data:text/plain;base64,aGVsbG8gd29ybGQ='',
''hello.txt'',
''text/plain''
)
.then(function(file){
console.log(file);
})

Ejemplo de uso 2: Convertir en objeto de archivo y cargar en servidor

srcToFile(
''data:text/plain;base64,aGVsbG8gd29ybGQ='',
''hello.txt'',
''text/plain''
)
.then(function(file){
console.log(file);
var fd = new FormData();
fd.append("file", file);
return fetch(''/server.php'', {method:''POST'', body:fd});
})
.then(function(res){
return res.text();
})
.then(console.log)
.catch(console.error)
;