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


102

어제 저는 심야 코딩 세션을 수행하고 작은 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과 실제 업로드 작업 사이의 접착제 입니까?

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


4
이 답변을 확인하십시오 : stackoverflow.com/questions/5867534/…
akirk 2011 년

답변:


217

여전히이 문제로 어려움을 겪고있는 사람들을 위해. 다음은 네이티브 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"
}

2
[MissingRequiredParameter : 매개 변수에 필수 키 'Key'누락]
Nichole A. Miler

1
키 : req.body.userId 포스트 데이터의 키로 userId를 사용했습니다 ... 오래 전입니다 ...하지만 모든 문자열을 키로 선언 할 수 있습니다. 이미 존재하는 파일을 덮어 쓰지 않도록 키를 고유하게 유지하십시오.
Divyanshu Das

@Divyanshu 유용한 예를 들어 주셔서 감사합니다. 나는 두 가지 의문을 가지고 : 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

2
@Marklar 위치 경로는 기본적으로 핵심입니다. 예를 들어 버킷 이름이-bucketone이고 키 이름이 xyz.png 인 경우 파일 경로는 bucketone.s3.amazonaws.com/xyz.png
Divyanshu Das

2
@Divyanshu이 훌륭한 답변에 감사드립니다! 많은 도움이되었습니다. 그러나 base64 인코딩 문자열을 이진 표현으로 디코딩 ContentEncoding: 'base64'하기 때문에 정확하지 않다고 생각 new Buffer(..., 'base64')합니다.
Shuhei Kagawa

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
버퍼 객체는 "버퍼가 정의되지 않았습니다"라는 오류를 발생시킵니다. 이에 대한 해결책을 제공 할 수 있습니다.
NaveenG

나는 또한 같은 오류가 발생합니다. 당신은 어떤 해결책을 얻었는지
Krishna

1
@NaveenG 이것은 노드 예제입니다. 일반 JS를 사용하고 있습니까?
Pointi

9

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

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.