2

ユーザーが自分の画像をアップロードできるようにするAngularJSを使用してWebアプリを構築しています。現在、私のデータはすべてテキスト ベースであるため、テキスト ベースのデータを Firebase に保存しています。私の知る限り、Firebase は画像を保存できません。私がやりたいのは、ユーザーが生成した画像を単純な場所 (Amazon S3 または Dropbox だと思います) に保存し、Firebase にテキストとして保存する一意の URL を介して画像を参照することです。

私の質問:

  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

Cloudinaryなどのサービスを使用して、ユーザーがアップロードした画像をホストできます。サービスの使用を非常に簡単にするAngular ディレクティブがあります。アップロード パラメータを暗号化するには、サーバー側の小さなコンポーネントが必要です。

于 2014-01-16T16:30:53.170 に答える