[英]Javascript || AWS S3 SDK & croppie file upload errors
我正在尝试将croppie 的裁剪结果上传到S3 存储桶。 当我成功裁剪然后尝试上传裁剪结果时,我目前收到空白错误。
我遵循了 Amazon 文档,包括设置 S3 存储桶、身份池和配置我的 CORS。
我相信这个错误与croppie如何打包裁剪结果有关。 我已经包含了我的 app.js 文件(我在其中处理上传)和调用 addPhoto function 的代码。 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);
}
应用程序.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);
}
);
}
我发现的解决方案涉及将以下代码段添加到我的 CORS 配置中,以及将作物结果“类型:”从 canvas 更改为 base64。
<AllowedHeader>*</AllowedHeader>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.