angularJS 应用程序的用户生成图像托管答案

【问题标题】：User generated image hosting for angularJS AppangularJS 应用程序的用户生成图像托管
【发布时间】：2013-10-26 18:53:23
【问题描述】：

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

我的问题：

这看起来是一种有效的方法吗？
有没有推荐的图片托管服务？
如何将图片上传到托管服务并获取图片的唯一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);

【问题讨论】：

我猜你可以在 Firebase 中存储图像，在这里查看这个答案：stackoverflow.com/a/13957446/1358670
Any recommended services for hosting the images? 不适用于本网站

标签： image angularjs upload amazon-s3 dropbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：