如何从javascript中的URL获取File（）或Blob（）？

Question

我尝试通过网址（使用ref().put(file)）将图片上传到Firebase存储空间（www.example.com/img.jpg）。

要做到这一点，我需要一个文件或Blob，但每当我尝试new File(url)它说“没有足够的论点”......

编辑：我实际上想上传整个文件目录，这就是为什么我无法通过控制台上传它们

Answer 1

尝试使用fetch API。您可以像这样使用它：

fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
  .then(res => res.blob()) // Gets the response and returns it as a blob
  .then(blob => {
    // Here's where you get access to the blob
    // And you can use it for whatever you want
    // Like calling ref().put(blob)

    // Here, I use it to make an image appear on the page
    let objectURL = URL.createObjectURL(blob);
    let myImage = new Image();
    myImage.src = objectURL;
    document.getElementById('myImg').appendChild(myImage)
});

<div id="myImg"></div>

截至2019年7月，fetch API在全球范围内大约有93% browser support，基本上只是IE缺少它。您可以使用polyfill将其降至接近100％，如果您仍然以IE为目标，我建议您这样做。

Answer 2

@James答案是正确的，但它与所有浏览器都不兼容。你可以试试

$.get('blob:yourbloburl').then(function(data) {
  var blob = new Blob([data], { type: 'audio/wav' });
});

Answer 3

直到我添加凭据才行

fetch(url, {
      headers: {
        "Content-Type": "application/octet-stream",
      },
      credentials: 'include'
 })