การอัปโหลดรูปภาพที่เข้ารหัส base64 ไปยัง Amazon S3 ผ่าน Node.js


108

เมื่อวานนี้ฉันทำเซสชันการเข้ารหัสในเวลากลางคืนและสร้าง node.js / JS ขนาดเล็ก (จริงๆแล้ว CoffeeScript แต่ CoffeeScript เป็นเพียง JavaScript ดังนั้นสมมติว่า JS)

เป้าหมายคืออะไร:

  1. ไคลเอนต์ส่ง canvas datauri (png) ไปยังเซิร์ฟเวอร์ (ผ่าน socket.io)
  2. เซิร์ฟเวอร์อัปโหลดภาพไปยัง amazon s3

ขั้นตอนที่ 1 เสร็จสิ้น

ตอนนี้เซิร์ฟเวอร์มีสตริง a la

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

คำถามของฉันคือขั้นตอนต่อไปในการ "สตรีม" / อัปโหลดข้อมูลนี้ไปยัง Amazon S3 และสร้างภาพจริงที่นั่นคืออะไร

knox https://github.com/LearnBoost/knoxดูเหมือนว่า lib ที่ยอดเยี่ยมในการใส่บางสิ่งลงใน S3 แต่สิ่งที่ฉันขาดหายไปคือกาวระหว่าง base64-encoded-image-string และการอัปโหลดจริงหรือไม่

ยินดีรับความคิดเห็นคำแนะนำและข้อเสนอแนะ


4
ตรวจสอบคำตอบนี้: stackoverflow.com/questions/5867534/…
akirk

คำตอบ:


229

สำหรับคนที่ยังคงดิ้นรนกับปัญหานี้ นี่คือแนวทางที่ฉันใช้กับ 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: ไม่มีคีย์ที่จำเป็น "คีย์" ในพารามิเตอร์]
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 ขอบคุณสำหรับคำตอบที่ดีนี้! มันช่วยฉันได้มาก อย่างไรก็ตามฉันคิดว่าContentEncoding: 'base64'ไม่ถูกต้องเพราะnew Buffer(..., 'base64')ถอดรหัสสตริงที่เข้ารหัส 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

ฉันยังได้รับข้อผิดพลาดเดียวกัน คุณมีทางออกหรือไม่
กฤษณะ

1
@NaveenG นี่คือตัวอย่างโหนดบางทีคุณอาจใช้ JS ธรรมดา?
Pointi

10

นี่คือรหัสจากบทความหนึ่งที่ฉันเจอโพสต์ด้านล่าง:

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

คำตอบที่ยอมรับนั้นใช้งานได้ดี แต่หากมีคนต้องการยอมรับไฟล์ใด ๆ แทนที่จะเป็นเพียงภาพ regexp นี้ใช้งานได้ดี:

/^data:.+;base64,/

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.