web-dev-qa-db-ja.com

URLからFirebaseStorageに画像をアップロードする

入力ではなくURLを介してFirebaseのストレージにファイルをアップロードする方法を知りたいです（たとえば）。ウェブサイトから画像を削除してURLを取得しています。これらのURLをforeachステートメントに渡して、Firebaseのストレージにアップロードしたいと思います。現在、firebaseのupload-via-inputが次のコードで機能しています。

var auth = firebase.auth();
var storageRef = firebase.storage().ref();

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();
 var file = evt.target.files[0];


  var metadata = {
    'contentType': file.type
  };

  // Push to child path.
  var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

  // Listen for errors and completion of the upload.
  // [START oncomplete]
  uploadTask.on('state_changed', null, function(error) {
    // [START onfailure]
    console.error('Upload failed:', error);
    // [END onfailure]
  }, function() {
    console.log('Uploaded',uploadTask.snapshot.totalBytes,'bytes.');
    console.log(uploadTask.snapshot.metadata);
    var url = uploadTask.snapshot.metadata.downloadURLs[0];
    console.log('File available at', url);
    // [START_EXCLUDE]
    document.getElementById('linkbox').innerHTML = '<a href="' +  url + '">Click For File</a>';}

何を置き換えるのか質問

var file = evt.target.files [0];

手動アップロードプロセスの代わりに外部URLで機能させるために？

var file = " http://i.imgur.com/eECefMJ.jpg ";動作しません！

javascriptfirebasefirebase-storage
7
HalesEnchanted

URLパスを保存するだけの場合は、FirebaseStorageを使用する必要はありません。 Firebase Storageは物理ファイル用ですが、Firebase RealtimeDatabaseは構造化データに使用できます。

例。外部サイトから画像のURLを取得したら、必要なのはこれだけです：

var externalImageUrl = 'https://foo.com/images/image.png';

次に、これをjson構造化データベースに保存します。

databaseReference.child('whatever').set(externalImageUrl);

[〜＃〜]または[〜＃〜]

実際に物理イメージを外部サイトからストレージに直接ダウンロードする場合は、httpリクエストを作成してblob応答を受信する必要があります。または、サーバー側の言語が必要になる場合があります。

Javascriptソリューション： javascriptを使用してURLからファイルを保存する方法

PHPソリューション： PHP URL から画像を保存する

4
KpTheConstructor

うまくいけば、これは他の誰かを助けるでしょう:)

    // Download a file form a url.
 function saveFile(url) {
 // Get file name from url.
  var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
  var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", transferComplete);
xhr.addEventListener("error", transferFailed);
xhr.addEventListener("abort", transferCanceled);

  xhr.responseType = 'blob';
  xhr.onload = function() {
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
    a.download = filename; // Set the file name.
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    delete a;

          if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        var reader = new FileReader();
        reader.onload = function(e) {

                    var auth = firebase.auth();
    var storageRef = firebase.storage().ref();

                     var metadata = {
        'contentType': 'image/jpeg'
      };

                    var file = e.target.result;
                    var base64result = reader.result.split(',')[1];
                    var blob = b64toBlob(base64result);


                       console.log(blob);

                var uploadTask = storageRef.child('images/' + filename).put(blob, metadata);

                uploadTask.on('state_changed', null, function(error) {
        // [START onfailure]
        console.error('Upload failed:', error);
        // [END onfailure]
      }, function() {
        console.log('Uploaded',uploadTask.snapshot.totalBytes,'bytes.');
        console.log(uploadTask.snapshot.metadata);
        var download = uploadTask.snapshot.metadata.downloadURLs[0];
        console.log('File available at', download);
        // [START_EXCLUDE]
        document.getElementById('linkbox').innerHTML = '<a href="' +  download + '">Click For File</a>';
        // [END_EXCLUDE]
      });
            // `data-uri`

        };
        reader.readAsDataURL(this.response);        
    };
  };



  xhr.open('GET', url);
  xhr.send();
}

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);
    byteArrays.Push(byteArray);
  }

  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}



    function transferComplete(evt) {        


            window.onload = function() {
      // Sign the user in anonymously since accessing Storage requires the user to be authorized.
    auth.signInAnonymously().then(function(user) {
        console.log('Anonymous Sign In Success', user);
        document.getElementById('file').disabled = false;
      }).catch(function(error) {
        console.error('Anonymous Sign In Error', error);
      });
    } 
}



function transferFailed(evt) {
  console.log("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  console.log("The transfer has been canceled by the user.");
}
3
HalesEnchanted

この回答 @ HalesEnchantedの回答に似ていますが、コードが少なくなっています。この場合、それはクラウド関数で実行されますが、フロントエンドからも同じことができると思います。 createWriteStream()にbucket.upload()と同様のオプションパラメータがあることにも注意してください。

const fetch = require("node-fetch");

const bucket = admin.storage().bucket('my-bucket');
const file = bucket.file('path/to/image.jpg');

fetch('https://example.com/image.jpg').then((res: any) => {
  const contentType = res.headers.get('content-type');
  const writeStream = file.createWriteStream({
    metadata: {
      contentType,
      metadata: {
        myValue: 123
      }
    }
  });
  res.body.pipe(writeStream);
});
1
galki