将图片从 URL 上传到 Firebase 存储

Posted 2023-03-25

【中文标题】将图片从 URL 上传到 Firebase 存储

【英文标题】：Upload image from URL to Firebase Storage

【发布时间】：2020-04-01 01:29:03

【问题描述】：

我想知道如何通过 URL 而不是输入（例如）将文件上传到 Firebase 的存储中。我正在从网站上抓取图像并检索它们的 URL。我想通过 foreach 语句传递这些 URL 并将它们上传到 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 文件 = evt.target.files[0];

使用外部 URL 代替手动上传过程？

var file = "http://i.imgur.com/eECefMJ.jpg";不工作！

【问题讨论】：

没有必要使用存储来存储它们（也许不可能）。链接是字符串，像存储所有其他数据一样将它们存储在数据库中。

【参考方案1】：

如果您所做的只是保存 url 路径，则无需使用 Firebase 存储。 Firebase 存储用于存储物理文件，而 Firebase 实时数据库可用于存储结构化数据。

示例。一旦你从外部网站获得图片网址，这就是你所需要的：

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

然后您将其存储在您的 json 结构化数据库中：

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

或

如果您想直接从外部站点将物理图像直接下载到存储中，那么这将需要发出 http 请求并接收 blob 响应，或者可能需要服务器端语言..

javascript 解决方案：How to save a file from a url with javascript

php 解决方案：Saving image from PHP URL

【讨论】：

您好，谢谢您的回复！我正在尝试保存物理图像！我会试试你给的建议！

没问题！我自己玩了一下，然后想出了这个：codepen.io/theConstructor/pen/vKNRdE

嘿，我正试图让它与 Firebase 一起工作，但它表现得很疯狂哈哈。这是正确的吗？ var uploadTask = storageRef.child('trial/' + 文件名).put.xhr('GET', url);

啊啊啊啊！我想到了。你太有帮助了！我现在唯一遇到的问题是它一直说请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'null'。

嗨 HalesEnchanted，您能分享您将图像从 URL 上传到 Firebase 存储的解决方案吗？

【参考方案2】：

This answer 类似于@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);
);

【参考方案3】：

使用 fetch 命令的 Javascript 解决方案。

var remoteimageurl = "https://example.com/images/photo.jpg"
var filename = "images/photo.jpg"

fetch(remoteimageurl).then(res => 
  return res.blob();
).then(blob => 
    //uploading blob to firebase storage
  firebase.storage().ref().child(filename).put(blob).then(function(snapshot) 
    return snapshot.ref.getDownloadURL()
 ).then(url => 
   console.log("Firebase storage image uploaded : ", url); 
  ) 
).catch(error => 
  console.error(error);
);

【参考方案4】：

希望这对其他人有帮助:)

    // 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.");