如何从对象URL获取文件或blob？

Question

我允许用户通过拖放和其他方法将图像加载到页面中。当图像丢失时，我使用URL.createObjectURL转换为对象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(); 

Answer 2

如果显示在画布文件，反正你也可以将画布内容转换为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 3

见Getting BLOB data from XHR request其中指出，所以你需要使用BlobBuilder不会在Chrome中工作：

xhr.responseType = 'arraybuffer'; 

Answer 4

不幸的是@ BrianFreud的答案不适合我的需要，我有一点点不同的需求，而且我知道这不是BrianFreud问题的答案，但我要离开这里，因为很多人都以同样的需求来到这里。我需要类似'如何从URL获取文件或blob？'，并且当前的正确答案不符合我的需求，因为它不是跨域的。

我有一个网站，从亚马逊的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/

我预计这将帮助其他更具体的需求。

Answer 5

也许有人认为在使用React/Node/Axios时很有用。我在界面上用react-dropzone作为我的Cloudinary图片上传功能。

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

    })