javascript - 如何从 JavaScript 中的 URL 获取 File() 或 Blob()？

Question

我尝试从 URL(使用 ref().put(file))(www.example.com/img.jpg) 将图像上传到 Firebase 存储。

为此，我需要一个文件或 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>

截至 2022 年 7 月，fetch API 有大约 97% browser support在全局范围内，基本上只有 IE 缺少它。您可以使用 polyfill 使其接近 100% ，如果您仍然以 IE 为目标，我建议您使用它。