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

Posted 2023-05-08

技术标签:

【中文标题】如何从 javascript 中的 URL 获取 File() 或 Blob()？【英文标题】：How to get a File() or Blob() from an URL in javascript? 【发布时间】：2017-10-19 14:33:57 【问题描述】：

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

为此，我需要一个文件或 Blob，但每当我尝试 new File(url) 时，它都会显示“参数不足”...

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

【问题讨论】：

您在哪个环境中运行 javascript？ File 无法获取 URL 并为您获取它，您必须获取它，读取其数据并使用该数据创建 File 对象。是的，javascript。你在哪里对，谢谢你的快速回答^^ 【参考方案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)
);

&lt;div id="myImg"&gt;&lt;/div&gt;

截至 2020 年 11 月，fetch API 在全球范围内大约有 96% browser support，基本上只有 IE 缺少它。您可以使用polyfill 将其提高到接近 100%，如果您仍然针对 IE，我建议您这样做。

【讨论】：

为什么要使用两个 .then 而不是只使用一个 res.blob 开头 res.blob() 返回一个promise，所以我们需要等待它解析后再访问内容：developer.mozilla.org/en-US/docs/Web/API/Body/blob 您可能会收到错误“请求的资源上不存在 'Access-Control-Allow-Origin' 标头”，如果是这样，您可以使用像 proxy= cors-anywhere.herokuapp.com 这样的 url 代理（或设置您的own) 然后 url = proxy + url，并使用代理 url 来获取数据。这是此问题的广泛答案***.com/a/43268098/9253363【参考方案2】：

@James 的答案是正确的，但它并不与所有浏览器兼容。你可以试试这个 jQuery 解决方案：

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

【讨论】：

这不是一个纯粹的 javascript 解决方案，而是一个 jQuery 解决方案，你绝对应该在答案中提到这一点。【参考方案3】：

在我添加凭据之前它不起作用

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

【讨论】：

【参考方案4】：

async function url2blob(url) 
  try 
    const data = await fetch(url);
    const blob = await data.blob();
    await navigator.clipboard.write([
      new ClipboardItem(
        [blob.type]: blob
      )
    ]);
    console.log("Success.");
   catch (err) 
    console.error(err.name, err.message);

【讨论】：

【参考方案5】：

如果您在 package.json 中使用主页，则 ypu 必须使用：

CurrentUrl：http://localhost:3008/tempAppHomepageFromPackageJson/

const file: File = this.state.file;
const localUrlToFile = URL.createObjectURL(file);
const fileHash = localUrlToFile.split('/');
const objectUrl = location.href + fileHash[fileHash.length - 1];

objectUrl 是文件的本地 url。例如在运行时显示您上传的文件。

第二种解决方案是（如果你在package.json中没有主页）：

const file: File = this.state.file;
const objectUrl = window.URL.createObjectURL(file);

第三种解决方案（不适用于 safari）：

const file: File = this.state.file;
let reader = new FileReader();
reader.readAsDataURL(file);
const objectUrl = reader.result as string;

享受;)

【讨论】：