Javascript || AWS S3 SDK &croppie 文件上传错误

Posted 2023-03-03

【中文标题】Javascript || AWS S3 SDK &croppie 文件上传错误

【英文标题】：Javascript || AWS S3 SDK & croppie file upload errors

【发布时间】：2020-08-11 06:07:35

【问题描述】：

我正在尝试将croppie 的裁剪结果上传到 S3 存储桶。当我成功裁剪然后尝试上传裁剪的结果时，我目前收到一个空白错误。

我遵循了 Amazon 文档，包括设置 S3 存储桶、身份池和配置我的 CORS。

我认为该错误与croppie 打包裁剪结果的方式有关。我已经包含了我的 app.js 文件（我在其中处理上传）和调用 addPhoto 函数的代码。 Resp 是来自croppie 的响应。

预期结果是我可以成功裁剪照片，然后将其上传到我的 S3 存储桶。

            $('.crop').on('click', function (ev) 
                $uploadCrop.croppie('result', 
                    type: 'canvas',
                    size: 'original'
                ).then(function (resp) 
                    Swal.fire(
                        imageUrl: resp,
                        showCancelButton: true,
                        confirmButtonText: "Upload",
                        reverseButtons: true,
                        showCloseButton: true
                    ).then((result) => 
                        if(result.value) 
                            addPhoto(resp);
                        

app.js

var albumBucketName = "colorsort";
var bucketRegion = "xxx";
var IdentityPoolId = "xxx";

AWS.config.update(
  region: bucketRegion,
  credentials: new AWS.CognitoIdentityCredentials(
    IdentityPoolId: IdentityPoolId
  )
);

var s3 = new AWS.S3(
  apiVersion: "2006-03-01",
  params:  Bucket: albumBucketName 
);

function addPhoto(resp) 
  var file = resp;
  var fileName = file.name;
  console.log(resp.type);

  var photoKey = fileName;

  // Use S3 ManagedUpload class as it supports multipart uploads
  var upload = new AWS.S3.ManagedUpload(
    params: 
      Bucket: albumBucketName,
      Key: photoKey,
      Body: file,
      ACL: "public-read"
    
  );

  var promise = upload.promise();

  promise.then(
    function(data) 
      alert("Successfully uploaded photo.");
    ,
    function(err) 
      return alert("There was an error uploading your photo: ", err.message);
    
  );

【参考方案1】：

我发现的解决方案涉及将以下 sn-p 添加到我的 CORS 配置中，以及将裁剪结果“类型：”从 canvas 更改为 base64。

<AllowedHeader>*</AllowedHeader>

有用资源：Upload missing ETag、Uploading base64 image to Amazon with Node.js