将图片从 URL 上传到 Firebase 存储

Question

我想知道如何通过 URL 而不是输入（例如）将文件上传到 Firebase 的存储中。我正在从网站上抓取图片并检索它们的 URLS。我想通过 foreach 语句传递这些 URLS 并将它们上传到 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 “;不起作用！

原文由 HalesEnchanted 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

例子 。从外部站点获取图像 url 后，这就是您所需要的：

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

然后你会把它存储在你的 json 结构化数据库中：

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

或者

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

Javascript 解决方案： 如何使用 javascript 从 url 保存文件

PHP 解决方案： 从 PHP URL 保存图像

原文由 KpTheConstructor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个答案 类似于@HalesEnchanted 的答案，但代码更少。在这种情况下，它是通过 Cloud Function 完成的，但我认为同样可以从前端完成。还要注意 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);
});

原文由 galki 发布，翻译遵循 CC BY-SA 4.0 许可协议