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

Solución:

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

Como menciono al margen, ¿por qué no envía la cadena base64 al servidor a través de ajax y la convierte a binario en el lado del servidor, usando PHP? base64_decode ¿por ejemplo? De todos modos, el código compatible con el estándar de esta respuesta funciona en Chrome 13 y WebKit nightlies:

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', "https://foroayuda.es/", true);
xhr.send(fd);

BlobBuilder está en desuso y ya no debería usarse. Utilice Blob en lugar del antiguo BlobBuilder. El código es muy limpio y sencillo.

El objeto de archivo se hereda del objeto Blob. Puede 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 en 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 breve 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 a objeto de archivo y subirlo al 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)
;

Si realmente desea convertir el dataURL en File objeto.

Necesita convertir el dataURL en Blob luego convierte el Blob dentro File. La función es de la respuesta de Matthew. (https://stackoverflow.com/a/7261048/13647044)

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);
      }
      return new Blob([ab], { type: mimeString });
    }

const blob = dataURItoBlob(url);
const resultFile = new File([blob], "file_name");

Aparte de eso, puede tener opciones en el File Objeto inicializado. Referencia al constructor File ().

const resultFile = new File([blob], "file_name",{type:file.type,lastModified:1597081051454});

El tipo debe ser [MIME][1] tipo (es decir image/jpeg) y el último valor modificado en mi ejemplo es equivalente a Mon Aug 10 2020 19:37:31 GMT+0200 (Eastern European Standard Time)

---

---

Utiliza Nuestro Buscador