ユーザーの画像をアカウントにアップロードします。express js を使用して作成しますか?[閉まっている]

StackOverflow https://stackoverflow.com//questions/23039861

質問

私はnode jsを初めて使用し、ユーザーが詳細を含むアカウントを作成する単純なアプリを作成しています。バックエンドでmongodbを使用してユーザーの詳細、名前、電子メールなどを保存しています。

アカウントを作成した後、ユーザーがログインする必要があるログインページにリダイレクトされ、ログインが成功するとユーザーはプロフィールにリダイレクトされ、現在セッションを使用して名前が表示されています。

今私が欲しいのは、アカウント作成時にユーザーの画像をアップロードしたいのですが、それをmongodbに保存するときに、スクリーンショットに示されているように、それをアカウント作成フォームにどのようにリンクするか疑問に思っています。

ユーザーがログインしてプロフィールページにリダイレクトされるときに、そのユーザーの画像をプロフィール写真として表示したいと考えています。

mongodbで画像の保存に関するリンクをたくさん見つけましたが、助けが得られなかったので、プロフィールページのスクリーンショットも添付しました。

これを実装するにはどうすればよいですか?enter image description here

自己紹介ページ

enter image description here

役に立ちましたか？

解決

本当にプロフィール写真を MongoDB に保存したい場合。通過することをお勧めします GridFS をいつ使用する必要がありますか?

次に、ユーザーにアップロードを許可するプロフィール写真の最大サイズを決定します。

MongoDB BSON ドキュメントの上限は 16MB です。したがって、ユーザーのドキュメント全体の合計が 16MB を超えない場合は、 ビンデータ データ・タイプ。

画像/ビデオ/PDF/Ppt/スプレッドシートなど - どれも同じ方法で保存できます。Web アプリで適切に表示するためにヘッダーで適切なコンテンツ タイプを返すかどうかは、アプリケーション次第です。

コーディングを楽しんでください。:)

アップデート：これを行うには、次のように画像データを Base64 エンコードする必要があります。

varbase64Image = new Buffer(uploadedFilesData, 'binary').toString('base64');

次に、Mongo を使用して保存します。 BinData 型の場合、実際には保存するのではなく、BSON ビット配列として保存します。 base64 string なので、サイズが元のバイナリ イメージより大きくなることはありません。MongoDB から読み取り、イメージとして提供したい場合は、次のようにできます。

app.get('/getimage', function(req, res) {
  db.collection.find({'imgId':req.params.id}, function(err,data) {
      var base64Image = var img = new Buffer(data.imgDataField, 'base64');
      res.writeHead(200, {
        'Content-Type': 'image/jpeg',
        'Content-Length': base64Image.buffer.length
      });
      res.end(base64Image.buffer);
  }
}

表示すべきクライアント側 base64Image 次のようなデータ:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAAAVBJREFUOI2tlLFKA0EQhr+9i2J1kBDFYG91gYRA0ngpJELQ2KSwlFjYKIidlZVvIFgEXyBYaBH0ESysLATBPiRYWFgEye7eWkSimL1wyg1MM//Mx87O7ghjjCEhc5ICJQ5LRQm9/oDLqzsenl4QgAHK/ir7O5us5JatNcJ2Z73+gKOzCz6kQjguQoAxYELNwlyK89NDK9DaZrvTZTiS4LggBAYBQoDjMhxJ2p1u/DbvH59xU/MYrac0Y8Z6bJgJDaEF9FOPDdNKMev1hVrFh2XTHq9v75GwpYxnjVsH0GrW0UqhtZ52pWg16/FhjVpANu2Ngb88m/Zo1IL4MICg5FthQcmPKomGVSsFpJQopSYupaRaKUTCIr9TuZhnq76O47iTWBhqysX832EA1ze3COf78LnFDBzvRebP3BrbG2tfUx23eXKwOyvd/tH/a4nus083fKdxIODDXwAAAABJRU5ErkJggg==" />
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top