Node.jsを介してbase64でエンコードされた画像をAmazon S3にアップロードする


99

昨日、深夜のコーディングセッションを行い、小さなnode.js / JS(実際にはCoffeeScriptですが、CoffeeScriptは単なるJavaScriptなので、JSと言いましょう)アプリを作成しました。

目標は何ですか:

  1. クライアントがキャンバスdatauri(png)をサーバーに送信(socket.io経由)
  2. サーバーが画像をAmazon S3にアップロードします

ステップ1が完了しました。

サーバーに文字列が追加されました

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt...

私の質問は、このデータをAmazon S3に「ストリーミング」/アップロードし、そこで実際のイメージを作成するための次のステップは何ですか?

knox https://github.com/LearnBoost/knoxはS3に何かをPUTするための素晴らしいライブラリのようですが、欠けているのは、base64-encoded-image-stringと実際のアップロードアクションの間の接着剤ですか?

どんなアイデア、アドバイス、フィードバックも歓迎します。


4
:この回答をチェックstackoverflow.com/questions/5867534/...
akirk

回答:


209

まだこの問題に苦しんでいる人々のために。これが、ネイティブのaws-sdkで使用したアプローチです。

var AWS = require('aws-sdk');
AWS.config.loadFromPath('./s3_config.json');
var s3Bucket = new AWS.S3( { params: {Bucket: 'myBucket'} } );

ルーターメソッド内:-ContentTypeは、画像ファイルのコンテンツタイプに設定する必要があります。

  buf = Buffer.from(req.body.imageBinary.replace(/^data:image\/\w+;base64,/, ""),'base64')
  var data = {
    Key: req.body.userId, 
    Body: buf,
    ContentEncoding: 'base64',
    ContentType: 'image/jpeg'
  };
  s3Bucket.putObject(data, function(err, data){
      if (err) { 
        console.log(err);
        console.log('Error uploading data: ', data); 
      } else {
        console.log('succesfully uploaded the image!');
      }
  });

s3_config.jsonファイルは:-

{
  "accessKeyId":"xxxxxxxxxxxxxxxx",
  "secretAccessKey":"xxxxxxxxxxxxxx",
  "region":"us-east-1"
}

2
[MissingRequiredParameter:Missing required key 'Key' in params]
Nichole A.Miler

1
キー:req.body.userId投稿データのキーとしてuserIdを使用しました...ずっと前のことですが、任意の文字列をキーとして宣言できます。すでに存在するファイルが上書きされないようにするには、キーを一意にしてください。
Divyanshu Das 2016

@Divyanshuそのような便利な例をありがとう。:私は2つの疑問を持ってHow to make S3 generates a unique KEY to prevent from overriding files?してIf I don't set the ContentType, when I download the files I won't be able to get the correct file?、私は、このような破損したファイルを取得します、私は意味ですか?前もって感謝します!
alexventuraio 2016年

2
@Marklarロケーションパスは基本的にキーである-例えば、あなたのバケット名がある場合- bucketoneとキー名はxyz.pngは、そのファイルのパスはなりますあるbucketone.s3.amazonaws.com/xyz.png
Divyanshuダス

2
@Divyanshuこの素晴らしい答えをありがとう!それは私を大いに助けました。ただし、base64でエンコードされた文字列をバイナリ表現にデコードするContentEncoding: 'base64'ため、私は正しくないと思いますnew Buffer(..., 'base64')
香川周平

17

わかりました、これはキャンバスデータをファイルに保存する方法の答えです

基本的にそれは私のコードではこのようになります

buf = new Buffer(data.dataurl.replace(/^data:image\/\w+;base64,/, ""),'base64')


req = knoxClient.put('/images/'+filename, {
             'Content-Length': buf.length,
             'Content-Type':'image/png'
  })

req.on('response', (res) ->
  if res.statusCode is 200
      console.log('saved to %s', req.url)
      socket.emit('upload success', imgurl: req.url)
  else
      console.log('error %d', req.statusCode)
  )

req.end(buf)

1
Bufferオブジェクトは「Buffer not define」というエラーをスローします。解決方法を教えてください。
NaveenG 2016

同じエラーが出ます。あなたは何か解決策を得たかどうか
クリシュナ

1
@NaveenGこれはノードの例です。おそらく、単純なJSを使用していますか?
Pointi 2018

7

以下は、私が出会った1つの記事のコードです。以下に投稿します。

const imageUpload = async (base64) => {

  const AWS = require('aws-sdk');

  const { ACCESS_KEY_ID, SECRET_ACCESS_KEY, AWS_REGION, S3_BUCKET } = process.env;

  AWS.config.setPromisesDependency(require('bluebird'));
  AWS.config.update({ accessKeyId: ACCESS_KEY_ID, secretAccessKey: SECRET_ACCESS_KEY, region: AWS_REGION });

  const s3 = new AWS.S3();

  const base64Data = new Buffer.from(base64.replace(/^data:image\/\w+;base64,/, ""), 'base64');

  const type = base64.split(';')[0].split('/')[1];

  const userId = 1;

  const params = {
    Bucket: S3_BUCKET,
    Key: `${userId}.${type}`, // type is not required
    Body: base64Data,
    ACL: 'public-read',
    ContentEncoding: 'base64', // required
    ContentType: `image/${type}` // required. Notice the back ticks
  }

  let location = '';
  let key = '';
  try {
    const { Location, Key } = await s3.upload(params).promise();
    location = Location;
    key = Key;
  } catch (error) {
  }

  console.log(location, key);

  return location;

}

module.exports = imageUpload;

詳細:http : //docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property

クレジット:https : //medium.com/@mayneweb/upload-a-base64-image-data-from-nodejs-to-aws-s3-bucket-6c1bd945420f


4

受け入れられた答えはうまくいきますが、誰かが画像だけでなくファイルを受け入れる必要がある場合、この正規表現はうまくいきます:

/^data:.+;base64,/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.