通过缝合 aws 服务将图像上传到 s3 失败

Question

Sorry I am a noob, but I am building a quasar frontend using mongodb stitch as backend.

I am trying to upload an image using the stitch javascript sdks and the AwsRequest.Builder.

Quasar gives me an image object with base64 encoded data.

I remove the header string from the base64 string (the part that says "data:image/jpeg;base64,"), I convert it to Binary and upload it to the aws s3 bucket.

I can get the data to upload just fine and when I download it again I get the exact bytes that I have uploaded, so the roundtrip through stitch to aws S3 and back seems to work.

Only, the image I upload can neither be opened in S3 nor cannot be opened once downloaded.

The difficulties seem to be in the conversion to binary of the base64 string and/or in the choice of the proper upload parameters for stitch.

Here is my code:

      var fileSrc = file.__img.src  // valid base64 encoded image with header string
      var fileData = fileSrc.substr(fileSrc.indexOf(',') + 1) // stripping out header string
      var body = BSON.Binary.fromBase64(fileData, 0) // here I get the BSON error

      const args = {
        ACL: 'public-read',
        Bucket: 'elever-erp-document-store',
        ContentType: file.type,
        ContentEncoding: 'x-www-form-urlencoded', // not sure about the need to specify encoding for binary file
        Key: file.name,
        Body: body
      }

      const request = new AwsRequest.Builder()
        .withService('s3')
        .withRegion('eu-west-1')
        .withAction('PutObject')
        .withArgs(args)

      aws.execute(request.build())
        .then(result => {
          alert('OK ' + result)
          return file
        }).catch(err => {
          alert('error ' + err)
        })

In the snippet above I try to use BSON.Binary.fromBase64 for the conversion to binary as per Haley's suggestion below, but I get following error:

boot_stitch__WEBPACK_IMPORTED_MODULE_3__["BSON"].Binary.fromBase64 is not a function.

I have also tried other ways to convert the base64 string to binary, like the vanilla atob() function and the BUFFER npm module, but with no joy.

I must be doing something stupid somewhere but I cannot find my way out.

Answer 1

I had a similar issue, solved it by creating a buffer from the base64 data and then used new BSON.Binary(new Uint8Array(fileBuffer), 0) to create the BSON Binary Object.

Using the OP it would look something like this:

var fileSrc = file.__img.src  // valid base64 encoded image with header string
var fileData = fileSrc.substr(fileSrc.indexOf(',') + 1) // stripping out header string
var fileBuffer = new Buffer(fileData, 'base64');
var body = new BSON.Binary(new Uint8Array(fileBuffer), 0)

Answer 2

You should be able to convert the base64 image to BSON.Binary and then upload the actual image that way (i have some of the values hard-coded, but you can replace those):

context.services.get("<aws-svc-name>").s3("<your-region>").PutObject({
    Bucket: 'myBucket',
    Key: "hello.png",
    ContentType: "image/png",
    Body: BSON.Binary.fromBase64("iVBORw0KGgoAA... (rest of the base64 string)", 0),
})