web-dev-qa-db-ja.com

javascriptのURLからFile（）またはBlob（）を取得する方法は？

URL（ref().put(file)）（www.example.com/img.jpg）からFirebaseストレージに画像をアップロードしようとしています。

そのためにはFileまたはBlobが必要ですが、new File(url)を試すたびに「引数が足りません」と表示されます…

編集：そして実際にファイルのディレクトリ全体をアップロードしたいので、コンソールからアップロードできない

javascriptfileurlblobfirebase-storage
13
Sam

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年8月の時点で、フェッチAPIには約 93％のブラウザーサポート があり、基本的にはIEがありません。 polyfill 、まだIEをターゲットにしている場合にお勧めします。

30
James Kraus

@Jamesの答えは正しいですが、すべてのブラウザーと互換性があるわけではありません。あなたが試すことができます

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

資格情報を追加するまで機能しませんでした

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