2

我正在使用 AngularJS 构建一个 Web 应用程序，允许用户上传他们自己的图像。现在我所有的数据都是基于文本的，所以我将基于文本的数据存储在 Firebase 中。据我所知，Firebase 无法存储图像。我想要做的是将用户生成的图像存储在某个简单的地方（我在想 Amazon S3 甚至 Dropbox），然后通过唯一的 URL 引用这些图像，我会将其作为文本存储在 Firebase 中。

我的问题：

  1. 这看起来是一种有效的方法吗？

  2. 任何托管图像的推荐服务？

  3. 如何将图片上传到托管服务并获取图片的唯一 URL？

现在我允许用户使用以下代码在前端上传图片，只是不确定一旦我有了这些图片该怎么处理。将不胜感激任何帮助，我对此很陌生！

HTML

<output id="list"></output>
<input type="file" id="files" name="files[]" class="button" multiple />
<a href="#" id="camera" class="button" ng-click="getImages()" prevent><i class="icon-camera"> Upload Pictures</i></a>

角度控制器

$scope.getImages = function(){
    $("input[type='file']").trigger('click');
}

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object



// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

    console.log(f);

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
4

2 回答 2

0

查看 Zapier 与 S3 的集成。这个想法是您在 firebase 中设置一个队列集合，您将在其中使用文件数据的二进制文件创建一个新实例。然后 zapier 在此队列集合上监听 child_add 并将您的文件上传到 S3 存储桶是否很神奇（您不必担心）。一切完成后，队列中的实例被删除......不需要服务器端，除非可能有一些费用......

这是链接https://zapier.com/zapbook/amazon-s3/

于 2014-09-23T22:36:20.380 回答
0

您可以使用Cloudinary 之类的服务来托管用户上传的图像。有一些Angular 指令使使用该服务变得非常容易。您将需要一个小型服务器端组件来加密上传参数。

于 2014-01-16T16:30:53.170 回答