上传的 AWS S3 图像已损坏

Question

when uploadingimages, If i use the data thats in my req.file.buffer which is an array of numbers.. the buffer. It uploads correctly the image to aws s3.

But i need to resize theimage before... so im trying to use jimp, like so:

const photo = await jimp.read(req.file.buffer)

await photo.cover(300, 300);

And then pass it to aws settings:

  const s3 = new AWS.S3()

  const params = {
    Bucket: 'jamsession-images',
    Key: req.body.photo,
    // here in body is a buffer just like the one in req.file.buffer
    Body: photo.bitmap.data 
  };

  s3.upload(params, function (err, data) {
    if (err) {
      console.log(err);
    }
    console.log('****************** success');
  });

But if i do this.. it uploads the image to aws s3.. but the image is corrupted

What im i doing here? i think aws s3 needs in the budy a buffer... and i think after jimp finished scaling the image.. that new buffer would work.. but it doesnt.. any ideas?

Full code:

exports.resize = async (req, res, next) => {
  // check if there is no new file to resize
  if (!req.file) {
    next(); // skip to the next middlewaree
    return;
  }
  const extension = req.file.mimetype.split('/')[1]
  req.body.photo = `${uuid.v4()}.${extension}`
  // now we resize
  const photo = await jimp.read(req.file.buffer)

  await photo.cover(300, 300);

  AWS.config.update({
    secretAccessKey: process.env.SECRETACCESSKEY,
    accessKeyId: process.env.ACCESSKEYID,
    region: 'us-east-1'
  })

  const s3 = new AWS.S3()

  const params = {
    Bucket: 'jamsession-images',
    Key: req.body.photo,
    // this line seems to be the issue.. 
    // even though photo.bitmap.data its also a buffer
    Body: photo.bitmap.data
  };


  s3.upload(params, function (err, data) {
    if (err) {
      console.log('%%%%%%%%%%%%%%% error in callback');
      console.log(err);
    }
    console.log('****************** success');
    console.log(data);
  });


  // await photo.write(`./public/uploads/${req.body.photo}`);
  // once we have written the photo to our filesystem, keep going!
  next()
};

Answer 1

I had have this problem too, to get the correct buffer of the result image we have to use Jimp's getBuffer function.

image.getBuffer(mime, cb);

Supported MIME types

Jimp.MIME_PNG; // "image/png"
Jimp.MIME_JPEG; // "image/jpeg"
Jimp.MIME_BMP; // "image/bmp"

But with Jimp.AUTO can have the mime type of the original image and use it.

You can read more of getBuffer function in https://www.npmjs.com/package/jimp

photo.getBuffer(Jimp.AUTO, function(error, result){
    const params = {
        Bucket: 'jamsession-images',
        Key: req.body.photo,
        // correct buffer 
        Body: result
    };

    s3.upload(...);
});