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

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

我的问题：

这是否看起来是一个有效的方法？
托管图像的任何推荐服务？
如何将图片上传到托管服务并获取图片的唯一网址？

现在我允许用户使用以下代码在前端上传图像，只是不知道如何处理图像。将不胜感激任何帮助，我很新！

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

来源

2013-10-26 user2833143

我想你可以存储图像Firebase，请在此处查看此答案：http://stackoverflow.com/a/13957446/1358670 –

“托管图像的任何推荐服务？”不是此站点的恰当问题 – charlietfl

你可以使用一个类似的服务，以Cloudinary通过托管用户上传的图片。有Angular directives，使使用服务很容易。您将需要一个小型服务器端组件来加密上传参数。

来源

2014-01-16 16:30:53 JBCP

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

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

来源

2014-09-23 22:36:20

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

回答

相关问题