Javascript || AWS S3 SDK & cropp ie ошибки загрузки файла - PullRequest
Новая
       47

Javascript || AWS S3 SDK & cropp ie ошибки загрузки файла

0 голосов
/ 27 апреля 2020

Я пытаюсь загрузить обрезанные результаты cropp ie в корзину S3. В настоящее время я получаю пустое сообщение об ошибке при успешной обрезке, а затем пытаюсь загрузить обрезанные результаты.

Я следовал документации Amazon, включая настройку корзины S3, пулов идентификации и настройку CORS.

Я считаю, что ошибка связана с тем, как cropp ie упаковывает обрезанные результаты. Я включил файл моего приложения. js (где я выполняю загрузку) и код, из которого вызывается функция addPhoto. Resp - это ответ от cropp ie.

Ожидаемый результат - я могу успешно обрезать фотографию и затем загрузить ее в свое хранилище 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 Ответ

0 голосов
/ 28 апреля 2020

Решение, которое я нашел, включало добавление следующего фрагмента в мою конфигурацию CORS, а также изменение cropp ie result 'type:' с canvas на base64. 

<AllowedHeader>*</AllowedHeader>

Полезные ресурсы: Загрузка отсутствующего ETag , Загрузка изображения base64 в Amazon с Node.js

...