wake-up-neo.com

So konvertieren Sie Blob in eine Datei in JavaScript

Ich muss ein Image auf einen NodeJS-Server in ein Verzeichnis hochladen. Ich benutze connect-busboy Knotenmodul dafür.

Ich hatte das dataURL des Bildes, das ich mit dem folgenden Code in einen Blob konvertiert habe:

dataURLToBlob: function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);
        return new Blob([raw], {type: contentType});
    }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
}

Ich brauche eine Möglichkeit, den Blob in eine Datei zu konvertieren, um das Bild hochzuladen.

Könnte mir jemand dabei helfen?

75
skip

Diese Funktion konvertiert ein Blob in ein File und funktioniert hervorragend für mich.

Vanille JavaScript

function blobToFile(theBlob, fileName){
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
}

TypeScript (mit richtigen Schreibweisen)

public blobToFile = (theBlob: Blob, fileName:string): File => {
    var b: any = theBlob;
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    b.lastModifiedDate = new Date();
    b.name = fileName;

    //Cast to a File() type
    return <File>theBlob;
}

Verwendung

var myBlob = new Blob();

//do stuff here to give the blob some data...

var myFile = blobToFile(myBlob, "my-image.png");
111
CBarr

Sie können den Dateikonstruktor verwenden:

var file = new File([myBlob], "name");

Gemäß der w3-Spezifikation werden die im Blob enthaltenen Bytes an die Bytes des neuen File-Objekts angehängt und die Datei mit dem angegebenen Namen erstellt http://www.w3.org/TR/FileAPI/# dfn-datei

130
Joshua P Nixon

Joshua P Nixon hat richtig geantwortet, aber ich musste auch das Datum der letzten Änderung einstellen. Also hier ist der Code.

var file = new File([blob], "file_name", {lastModified: 1534584790000});

15345847900 ist ein Unix-Zeitstempel für " GMT: Samstag, 18. August 2018, 9:33:10 Uhr "

13
mili

Meine moderne Variante:

function blob2file(blobData) {
  const fd = new FormData();
  fd.set('a', blobData);
  return fd.get('a');
}
8
DAVID _

Verwenden Sie saveAs für FileSaver.js github project.

FileSaver.js Implementiert die saveAs() FileSaver-Schnittstelle in Browsern, die dies nicht nativ unterstützen.

1