上传到s3的图像无法渲染 [英] Image upload to s3 does not render

问题描述

我正在使用Expo Image Picker将裁剪的图像发送到s3.该文件正在上载，但由于未识别为一个图像而无法呈现为图像.如果我获取了Blob数据并将其用于base64图像编码器中，则会得到图像，因此该图像必须基于mime或编码，这就是我所拥有的.

I am using Expo Image Picker to send a cropped image to s3. The file is being uploaded, but it does not render as an image as its not recognised as one. If I took the blob data and use it in a base64 to image encoder I get the image, so it must be mime or encoding based, here is what I have.

我通过以下方式调用Expo Image Picker:

I invoke the Expo Image Picker with;

let pickerResult = await ImagePicker.launchImageLibraryAsync({
  allowsEditing: true,
  aspect: [1, 1],
  base64: true,
  exif: false,
});

我用来从s3 SDK创建签名的URL的参数是；

The params I use to create the signed URL from s3 SDK are;

const params = {
    Bucket: 'images,
    Key: 'filename.jpg',
    Expires: 60 * 5,
    ACL: 'public-read',
    ContentEncoding: 'base64',
    ContentType: 'image/jpeg'
};

使用带有以下标头的axios完成上传；

The upload is done with axios with the following headers;

const config = { 
                  headers: {
                    'x-amz-acl' : 'public-read', 
                    'Content-Encoding': 'base64',
                    'Content-Type': 'image/jpeg'
                  }
                };

return await axios.put(`${signedURL}`,
  base64data,
  config)
    .then(response => {
      console.log('IMAGE UPLOAD SUCCESS');
      return response.data;
    })

如果我将创建的.jpg文件更改为.txt并进行高级查看，则数据为base64编码的字符串，而不是jpeg的常规blob数据.

If I change the created .jpg file as .txt and view it in sublime the data is the base64 encoded string rather than the usual blob data of a jpeg.

我在做什么错了?

推荐答案

好；找到了解决方案；

Ok; found the solution;

使用npm缓冲模块；

use the buffer npm module;

从'buffer'导入{Buffer};

import { Buffer } from 'buffer';

将此添加到我的函数中

return await axios.put(`${signedURL}`,
      new Buffer(base64data, 'base64'), // make this a buffer
      config)
        .then(response => {
          console.log('IMAGE UPLOAD SUCCESS');
          return response.data;
        })

这篇关于上传到s3的图像无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！