【问题标题】：Storing and Viewing Base64 Image in S3在 S3 中存储和查看 Base64 图像
【发布时间】：2019-08-08 11:16:44
【问题描述】：

我正在将图像存储到 S3，如下所示：

const params = {
  Bucket: "xyz-bucket",
  Key: this.folder + this.filename,
  Body: file,
  ACL: "public-read",
  ContentEncoding: 'base64',
  ContentType: 'image/jpg'
};

它在 S3 中成功存储为：https://s3.eu-west-2.amazonaws.com/xyz-bucket/1552861956582_0djO8.jpg

但是当我尝试查看它时，我看到：

当我下载文件并在文本编辑器中打开时，我会看到，具体取决于我存储的内容。两种方法都试了，都看不到图片：

/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0AKgAAAAgAA...

或

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0...

现在，问题是我哪里错了？我保存文件的方式或我试图查看它的方式。

更新

openGallery() {
const options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  correctOrientation: true,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
};
this.camera
  .getPicture(options)
  .then(data_uri => {
    this.upload(data_uri);
  }, err => console.log(err));
}

upload(file: any) {
  this.uploadService.uploadfile(file);
}

upload.service.ts

uploadfile(file) {
const bucket = new S3({
  accessKeyId: "****",
  secretAccessKey: "*******",
  region: "***"
});

var epoch_timestamp = new Date().getTime();
this.filename = epoch_timestamp + "_" + this.randomStringGenerator() + ".jpg";
const params = {
  Bucket: "xyz-bucket",
  Key: this.folder + this.filename,
  Body: file,
  ACL: "public-read",
  ContentEncoding: 'base64',
  ContentType: 'image/jpg'
};

bucket.upload(params, function(err, data) {
  if (err) {
    console.log("There was an error uploading your file: ", err);
    return false;
  }

  console.log("Successfully uploaded file.", data);
  return true;
});

randomStringGenerator(length = 5) {
var text = "";
var possible =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (var i = 0; i < length; i++)
  text += possible.charAt(Math.floor(Math.random() * possible.length));

return text;

}

【问题讨论】：

能否请您写下图片上传代码，以便我们找出问题所在，因为当您直接从 url 打开图片时，您无法看到图片，所以我猜图片有问题从 base64 转换图像。
@YashRami 等一下。

标签： angular typescript amazon-web-services amazon-s3 angular6

【解决方案1】：

你可以这样试试。希望对你有帮助

openGallery() {
const options: CameraOptions = {
 quality: 50,
 destinationType: this.camera.DestinationType.FILE_URI,
 encodingType: this.camera.EncodingType.JPEG,
 mediaType: this.camera.MediaType.PICTURE,
 correctOrientation: true,
 sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
};
this.camera
 .getPicture(options)
 .then(imageData=> {
   let base64Image = 'data:image/jpeg;base64,' + imageData; //mimetype should be change based on image type
   this.upload(base64Image);
 }, err => console.log(err));
}

upload(file: any) {
  this.uploadService.uploadfile(file);
}

【讨论】：

【解决方案2】：

我已经设法在请求正文中使用二进制类型来解决：

curl --location --request PUT 'https://api_id.execute-api.eu-west-1.amazonaws.com/stage/uploadpicture' \
--header 'Content-Type: image/jpeg' \
--data-binary '@a.jpg'

问题已通过使用上述命令解决，而不是：

curl --location --request PUT 'https://api_id.execute-api.eu-west-1.amazonaws.com/stage/uploadpicture' \
--header 'Content-Type: image/jpeg' \
--form 'image=@a.jpg'

Data binary(--data-binary parameter) 而不是 form(--form) 做到了。

【讨论】：