[英]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.