Wie erhalte ich eine Datei oder einen Blob von einer Objekt-URL?

Ich erlaube dem Benutzer, Bilder per Drag & Drop und anderen Methoden auf eine Seite zu laden. Wenn ein Bild gelöscht wird, URL.createObjectURLkonvertiere ich es in eine Objekt-URL, um das Bild anzuzeigen. Ich widerrufe die URL nicht, da ich sie wieder verwende.

Wenn es also an der Zeit ist, ein FormDataObjekt zu erstellen, damit sie ein Formular mit einem dieser Bilder hochladen können, kann ich diese Objekt-URL dann auf irgendeine Weise wieder in eine umkehren Bloboder Filesie dann an eine anhängen FormDataObjekt?

Moderne Lösung:

let blob = await fetch(url).then(r => r.blob());

Die URL kann eine Objekt-URL oder eine normale URL sein.

Wie Gengkev in seinem obigen Kommentar anspielt, scheint es der beste / einzige Weg zu sein, dies mit einem asynchronen xhr2-Aufruf zu tun:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//your.blob.url.here', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var myBlob = this.response;
    // myBlob is now the blob that the object URL pointed to.
  }
};
xhr.send();

Update (2018): Für Situationen, in denen ES5 sicher verwendet werden kann, hat Joe unten eine einfachere ES5-basierte Antwort.

Vielleicht findet jemand dies nützlich, wenn er mit React / Node / Axios arbeitet. Ich habe dies für meine Cloudinary-Funktion zum Hochladen von Bildern react-dropzoneauf der Benutzeroberfläche verwendet.

    axios({
        method: 'get',
        url: file[0].preview, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc
        responseType: 'blob'
    }).then(function(response){
         var reader = new FileReader();
         reader.readAsDataURL(response.data); 
         reader.onloadend = function() {
             var base64data = reader.result;
             self.props.onMainImageDrop(base64data)
         }

    })

Siehe Abrufen von BLOB-Daten aus einer XHR-Anforderung, in dem darauf hingewiesen wird, dass BlobBuilder in Chrome nicht funktioniert. Sie müssen daher Folgendes verwenden:

xhr.responseType = 'arraybuffer';

Verwenden Sie Fetch zum Beispiel wie folgt:

 fetch(<"yoururl">, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + <your access token if need>
    },
       })
.then((response) => response.blob())
.then((blob) => {
// 2. Create blob link to download
 const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `sample.xlsx`);
 // 3. Append to html page
 document.body.appendChild(link);
 // 4. Force download
 link.click();
 // 5. Clean up and remove the link
 link.parentNode.removeChild(link);
})

Sie können zum Testen in die Chrome-Konsole einfügen. die Datei mit Download mit 'sample.xlsx' Hoffe es kann helfen!

Leider passt die Antwort von @ BrianFreud nicht zu meinen Bedürfnissen, ich hatte ein etwas anderes Bedürfnis und ich weiß, dass dies nicht die Antwort auf die Frage von @ BrianFreud ist, aber ich lasse sie hier, weil viele Personen mit demselben Bedürfnis hierher gekommen sind. Ich brauchte etwas wie "Wie bekomme ich eine Datei oder einen Blob von einer URL?", Und die aktuell richtige Antwort entspricht nicht meinen Anforderungen, da sie nicht domänenübergreifend ist.

Ich habe eine Website, die Bilder aus einem Amazon S3 / Azure-Speicher verwendet, und dort speichere ich Objekte mit eindeutigen Kennungen:

Beispiel: http: //****.blob.core.windows.net/systemimages/bf142dc9-0185-4aee-a3f4-1e5e95a09bcf

Einige dieser Bilder sollten von unserer Systemschnittstelle heruntergeladen werden. Um zu vermeiden, dass dieser Datenverkehr über meinen HTTP-Server geleitet wird, habe ich beschlossen, eine direkte Anfrage im Browser des Benutzers zu stellen und der Datei die lokale Verarbeitung zu geben, um der Datei einen echten Namen zu geben, da für diese Objekte keine Sicherheit erforderlich ist (außer durch Domänenfilterung) Erweiterung.

Um dies zu erreichen, habe ich diesen großartigen Artikel von Henry Algus verwendet: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1. Erster Schritt: Fügen Sie jquery binäre Unterstützung hinzu

/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0 
* @author Henry Algus <[email protected]>
*
*/

// use this transport for "binary" data type
$.ajaxTransport("+binary", function (options, originalOptions, jqXHR) {
    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
        return {
            // create new XMLHttpRequest
            send: function (headers, callback) {
                // setup all variables
                var xhr = new XMLHttpRequest(),
        url = options.url,
        type = options.type,
        async = options.async || true,
        // blob or arraybuffer. Default is blob
        dataType = options.responseType || "blob",
        data = options.data || null,
        username = options.username || null,
        password = options.password || null;

                xhr.addEventListener('load', function () {
                    var data = {};
                    data[options.dataType] = xhr.response;
                    // make callback and send data
                    callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                });

                xhr.open(type, url, async, username, password);

                // setup custom headers
                for (var i in headers) {
                    xhr.setRequestHeader(i, headers[i]);
                }

                xhr.responseType = dataType;
                xhr.send(data);
            },
            abort: function () {
                jqXHR.abort();
            }
        };
    }
});

2. Zweiter Schritt: Stellen Sie eine Anfrage mit diesem Transporttyp.

function downloadArt(url)
{
    $.ajax(url, {
        dataType: "binary",
        processData: false
    }).done(function (data) {
        // just my logic to name/create files
        var filename = url.substr(url.lastIndexOf('/') + 1) + '.png';
        var blob = new Blob([data], { type: 'image/png' });

        saveAs(blob, filename);
    });
}

Jetzt können Sie den erstellten Blob so verwenden, wie Sie möchten. In meinem Fall möchte ich ihn auf der Festplatte speichern.

3. Optional: Speichern Sie die Datei mit FileSaver auf dem Computer des Benutzers

Ich habe FileSaver.js verwendet, um die heruntergeladene Datei auf der Festplatte zu speichern. Wenn Sie dies benötigen, verwenden Sie bitte diese Javascript-Bibliothek:

https://github.com/eligrey/FileSaver.js/

Ich erwarte, dass dies anderen mit spezifischeren Bedürfnissen hilft.

Wenn Sie die Datei trotzdem in einer Zeichenfläche anzeigen, können Sie den Zeichenflächeninhalt auch in ein Blob-Objekt konvertieren.

canvas.toBlob(function(my_file){
  //.toBlob is only implemented in > FF18 but there is a polyfill 
  //for other browsers https://github.com/blueimp/JavaScript-Canvas-to-Blob
  var myBlob = (my_file);
})