如何从一个目标URL文件或斑点？(How to get a file or blob from an

我允许用户通过拖放操作等方法图像加载到页面。当图像被丢弃，我使用URL.createObjectURL转换为对象的URL来显示图像。我不撤销的URL，因为我做的重用。

所以，当谈到时间来创建一个FormData对象，所以我可以让他们上传的形式，在它的形象之一，是有一些方法，然后我可以扭转这一目标URL回一个Blob或File ，所以我可以再追加它的FormData对象？

Answer 1:

至于gengkev暗示在上面他的评论，它看起来像最好的/只有这样，才能做到这一点是一个异步调用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();

更新（2018）：对于那些可以安全使用ES5的情况下，乔下面有个简单的基于ES5回答。

Answer 2:

现代的解决方案：

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

URL可以是一个对象的URL或一个正常的URL。

Answer 3:

也许有人与之反应/节点/ Axios公司工作时，发现这个有用。我用这对我Cloudinary图片上传功能react-dropzone上的UI。

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

    })

Answer 4:

请参阅充分利用XHR请求BLOB数据，其指出，所以你需要使用BlobBuilder不会在Chrome中工作：

xhr.responseType = 'arraybuffer';

Answer 5:

如果你表现出文件中的画布，反正你也可以转换画布内容的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);
})

Answer 6:

不幸的是@ BrianFreud的答案不适合我的需要，我有一点点不同的需求，我知道这是不是@ BrianFreud的问题的答案，但我离开这里，因为有很多人与我一样需要来到这里。我需要的东西，如“如何获得从URL文件或斑点？”，而目前的正确答案不适合我的需要，因为它不是跨域。

我有一个网站，从亚马逊的S3 / Azure存储消耗的图像，并有我存储与uniqueidentifiers命名的对象：

样品：HTTP：//****.blob.core.windows.net/systemimages/bf142dc9-0185-4aee-a3f4-1e5e95a09bcf

一些这方面的图像应该是从我们的系统界面上下载。为了避免将这些流量通过我的HTTP服务器，因为这个对象不要求（按域滤波除外），访问任何安全，我决定对用户的浏览器直接请求，并使用本地处理给文件一个真实姓名和延期。

为了实现这个目标我已经使用亨利阿尔伽斯这篇大文章： http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1.第一步：添加到jQuery的二进制数据支持

/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0 
* @author Henry Algus <henryalgus@gmail.com>
*
*/

// 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.第二步骤：使使用这种传输类型的请求。

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

现在，只要你想，在我的情况下，我想将它保存到磁盘，您可以使用创建的斑点。

3.可选：您可以采用FileSaver用户计算机上的文件

我已经使用FileSaver.js保存到磁盘下载的文件，如果需要实现这一点，请使用此JavaScript库：

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

我期望这将帮助其他更具体的需求。

文章来源: How to get a file or blob from an object URL?