Jak uzyskać plik lub obiekt blob z adresu URL obiektu?

Pozwalam użytkownikowi ładować obrazy na stronę za pomocą przeciągania i upuszczania oraz innych metod. Kiedy obraz jest upuszczany, używam go URL.createObjectURLdo konwersji na adres URL obiektu, aby wyświetlić obraz. Nie odwołuję adresu URL, ponieważ używam go ponownie.

Tak więc, kiedy przychodzi czas na utworzenie FormDataobiektu, aby umożliwić im przesłanie formularza z jednym z tych obrazów, czy jest jakiś sposób, aby następnie odwrócić ten adres URL obiektu z powrotem do Bloblub Filetak, abym mógł następnie dołączyć go do FormDataobiekt?

Nowoczesne rozwiązanie:

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

Adres URL może być adresem URL obiektu lub normalnym adresem URL.

Jak Gengkev wspomina w swoim komentarzu powyżej, wygląda na to, że najlepszym / jedynym sposobem na zrobienie tego jest wywołanie asynchroniczne xhr2:

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();

Aktualizacja (2018): w sytuacjach, w których można bezpiecznie używać ES5, Joe ma poniżej prostszą odpowiedź opartą na ES5.

Może ktoś uzna to za przydatne podczas pracy z React / Node / Axios. Użyłem tego do mojej funkcji przesyłania obrazu Cloudinary react-dropzonew interfejsie użytkownika.

    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)
         }

    })

Zobacz Pobieranie danych BLOB z żądania XHR, które wskazuje, że BlobBuilder nie działa w Chrome, więc musisz użyć:

xhr.responseType = 'arraybuffer';

Na przykład używając fetch, jak poniżej:

 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);
})

Możesz wkleić na konsoli Chrome, aby przetestować. plik do pobrania z „sample.xlsx” Mam nadzieję, że może pomóc!

Niestety odpowiedź @ BrianFreud nie pasuje do moich potrzeb, miałem trochę inną potrzebę i wiem, że to nie jest odpowiedź na pytanie @ BrianFreud, ale zostawiam ją tutaj, ponieważ wiele osób przybyło tutaj z tą samą potrzebą. Potrzebowałem czegoś w stylu „Jak uzyskać plik lub obiekt blob z adresu URL?”, A aktualna poprawna odpowiedź nie odpowiada moim potrzebom, ponieważ nie jest międzydomenowa.

Mam witrynę internetową, która zużywa obrazy z magazynu Amazon S3 / Azure i tam przechowuję obiekty o nazwach z unikatowymi identyfikatorami:

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

Niektóre z tych obrazów należy pobrać z naszego interfejsu systemowego. Aby uniknąć przekazywania tego ruchu przez mój serwer HTTP, ponieważ te obiekty nie wymagają dostępu do żadnych zabezpieczeń (z wyjątkiem filtrowania domeny), postanowiłem wykonać bezpośrednie żądanie w przeglądarce użytkownika i użyć lokalnego przetwarzania, aby nadać plikowi prawdziwą nazwę i rozbudowa.

Aby to osiągnąć, wykorzystałem ten wspaniały artykuł Henry'ego Algusa: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1. Pierwszy krok: dodaj obsługę binarną do jquery

/**
*
* 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. Krok drugi: Złóż wniosek przy użyciu tego typu transportu.

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);
    });
}

Teraz możesz użyć utworzonego Bloba, jak chcesz, w moim przypadku chcę go zapisać na dysku.

3. Opcjonalnie: Zapisz plik na komputerze użytkownika za pomocą programu FileSaver

Użyłem FileSaver.js do zapisania na dysku pobranego pliku, jeśli chcesz to zrobić, użyj tej biblioteki javascript:

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

Oczekuję, że pomoże to innym z bardziej konkretnymi potrzebami.

Jeśli mimo wszystko pokazujesz plik w kanwie, możesz również przekonwertować zawartość kanwy na obiekt blob.

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);
})