Question

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

我的问题：

这看起来是一种有效的方法吗？
主办图片的推荐服务是什么？
如何将图片上传到托管服务并获取图片的唯一网址？

现在我允许用户使用以下代码在前端上传图像，只是在我拥有图像后不确定如何处理图像。非常感谢任何帮助，我对此非常陌生！

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);

Answer 1

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

Answer 2

了解Zapier与S3的整合。我们的想法是在firebase中设置队列集合，您可以使用文件数据的二进制文件创建新实例。然后zapier监听这个队列集合上的child_added，并且将你的文件上传到S3存储桶是不可思议的（你不必担心）。完成所有操作后，队列中的实例将被删除...除非可能有一些费用，否则不需要服务器端...

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

用户生成的angularJS App图像托管

2 个答案: