[javascript] Node.js를 통해 Amazon S3에 base64 인코딩 이미지 업로드

Program / 글쓴이

어제 저는 심야 코딩 세션을 수행하고 작은 node.js / JS (실제로 CoffeeScript이지만 CoffeeScript는 JavaScript 일 뿐이므로 JS) 앱을 만들었습니다.

목표는 무엇입니까 :

  1. 클라이언트는 (socket.io를 통해) 서버에 캔버스 datauri (png)를 보냅니다
  2. 서버가 Amazon s3에 이미지 업로드

1 단계가 완료되었습니다.

이제 서버에 a la 문자열이 있습니다. 

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

내 질문은 : 이 데이터를 Amazon S3에 “스트리밍”/ 업로드하고 거기에서 실제 이미지를 생성하는 다음 단계는 무엇입니까?

knox https://github.com/LearnBoost/knox 는 S3에 무언가를 넣는 멋진 lib처럼 보이지만 내가 놓친 것은 base64-encoded-image-string과 실제 업로드 작업 사이의 접착제 입니까?

모든 아이디어, 조언 및 피드백을 환영합니다.

답변

여전히이 문제로 어려움을 겪고있는 사람들을 위해. 다음은 네이티브 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('successfully uploaded the image!');
      }
  });

s3_config.json 파일 :

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

답변

좋아, 이것은 캔버스 데이터를 파일에 저장하는 방법에 대한 답입니다.

기본적으로 내 코드에서 이와 같이 풀립니다.

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)

답변

아래에 게시 한 한 기사의 코드는 다음과 같습니다.

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

답변

허용되는 답변은 훌륭하게 작동하지만 누군가 이미지 대신 파일을 허용해야하는 경우이 정규식이 훌륭하게 작동합니다.

/^data:.+;base64,/

답변