通過 NodeJs 從瀏覽器上傳圖片到 S3 bucket

Question

我正在嘗試將圖像從瀏覽器上傳到 Amazon S3，下面的代碼將某種 blob 發送到 Amazon S3 就好了，我無法在瀏覽器中讀取生成的文件。 它似乎不知道它是一個圖像文件。

我從瀏覽器將它發送到 NodeJS：

let myReader=new FileReader();
myReader.onloadend=(e)=>{ app.ws.send(myReader.result); }
myReader.readAsDataURL(e.target.files[0]);  

在 NodeJS 中，我將它發送到 S3：

const s3=new AWS.S3();
const params= { Bucket:<bucketName>, Key:fileName, Body:imgData, ACL:"public-read", ContentEncoding:'base64' };
s3.putObject(params, (err, data)=>{
    if (err) throw err; 
});

Answer 1

查看 AWS S3 指南，該文檔包含將圖像從瀏覽器上傳到 S3 存儲桶所需的邏輯

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

Answer 2

原來你需要修改傳入的 base64 圖像數據並顯式設置 ContentType：

const s3=new AWS.S3();
const type = imgData.split(';')[0].split('/')[1];
imgData= new Buffer.from(imgData.replace(/^data:image\/\w+;base64,/, ""), 'base64');
let params = { Bucket:<bucketName>, Key:fileName, Body:imgData, 
    ACL:"public-read", ContentType:"image."+type, ContentEncoding: 'base64' };

s3.upload(params, (err, data)=>{
    if (err) throw err;
    ... Do something ... 
    });