Comment obtenir un fichier ou un objet blob à partir d'une URL d'objet?

J'autorise l'utilisateur à charger des images dans une page par glisser-déposer et d'autres méthodes. Lorsqu'une image est supprimée, j'utilise URL.createObjectURLpour convertir en une URL d'objet pour afficher l'image. Je ne révoque pas l'URL, car je la réutilise.

Donc, quand vient le temps de créer un FormDataobjet afin que je puisse leur permettre de télécharger un formulaire avec l'une de ces images, y a-t-il un moyen pour que je puisse ensuite inverser cette URL d'objet en un Blobou Filealors je peux ensuite l'ajouter à un FormDataobjet?

Solution moderne:

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

L'URL peut être une URL d'objet ou une URL normale.

Comme Gengkev y fait allusion dans son commentaire ci-dessus, il semble que la meilleure / seule façon de le faire soit avec un appel async 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();

Mise à jour (2018): Pour les situations où ES5 peut être utilisé en toute sécurité, Joe a une réponse plus simple basée sur ES5 ci-dessous.

Peut-être que quelqu'un trouve cela utile lorsque vous travaillez avec React / Node / Axios. Je l'ai utilisé pour ma fonctionnalité de téléchargement d'image Cloudinary avec react-dropzonesur l'interface utilisateur.

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

    })

Consultez Obtenir des données BLOB à partir d'une requête XHR qui indique que BlobBuilder ne fonctionne pas dans Chrome, vous devez donc utiliser:

xhr.responseType = 'arraybuffer';

En utilisant fetch par exemple comme ci-dessous:

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

Vous pouvez coller sur la console Chrome pour tester. le fichier à télécharger avec «sample.xlsx» J'espère qu'il peut vous aider!

Malheureusement, la réponse de @ BrianFreud ne correspond pas à mes besoins, j'avais un besoin un peu différent, et je sais que ce n'est pas la réponse à la question de @ BrianFreud, mais je la laisse ici parce que beaucoup de personnes sont arrivées ici avec mon même besoin. J'avais besoin de quelque chose comme «Comment obtenir un fichier ou un objet blob à partir d'une URL?», Et la bonne réponse actuelle ne correspond pas à mes besoins car elle n'est pas interdomaine.

J'ai un site Web qui consomme des images d'un stockage Amazon S3 / Azure, et j'y stocke des objets nommés avec des identificateurs uniques:

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

Certaines de ces images doivent être téléchargées depuis notre interface système. Pour éviter de faire passer ce trafic via mon serveur HTTP, puisque cet objet ne nécessite aucune sécurité pour accéder (sauf par filtrage de domaine), j'ai décidé de faire une requête directe sur le navigateur de l'utilisateur et d'utiliser un traitement local pour donner au fichier un vrai nom et extension.

Pour ce faire, j'ai utilisé cet excellent article de Henry Algus: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1. Première étape: ajouter le support binaire à 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. Deuxième étape: faites une demande en utilisant ce type de transport.

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

Vous pouvez maintenant utiliser le Blob créé comme vous le souhaitez, dans mon cas, je veux l'enregistrer sur le disque.

3. Facultatif: enregistrez le fichier sur l'ordinateur de l'utilisateur à l'aide de FileSaver

J'ai utilisé FileSaver.js pour enregistrer sur le disque le fichier téléchargé, si vous devez accomplir cela, veuillez utiliser cette bibliothèque javascript:

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

J'espère que cela aidera d'autres personnes ayant des besoins plus spécifiques.

Si vous affichez quand même le fichier dans un canevas, vous pouvez également convertir le contenu du canevas en objet 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);
})