使用预签名 URL 将文件上传到 AWS S3

Question

我的 S3 预签名 URL 在 Postman 中运行良好，我可以使用 Postman 将图像上传到 S3。我现在正试图让它从我自己的网页上运行。我让 jQuery 可以很好地检索预签名的 URL。问题是当我尝试将图像上传到 S3 时。我在 Firefox 浏览器中收到 403 Forbidden。任何见解都非常感谢。以下是相关的 HTML 和 jQuery 代码：

<form enctype='multipart/form-data' id="aws_upload_form" method='POST' >
   <input type='hidden' name='MAX_FILE_SIZE' value='1000000' />
   <input type='hidden' name='x-amz-acl' value='public-read' />
   <input type='file' id="fileInput" />
   <input type='submit' value='Upload Selected File To S3' />
</form>

我认为问题出在如下所示的 handleData 函数中：

$(document).ready(function() {
    const apigw_endpt = "https://blahblah.execute-api.region.amazonaws.com/api";
    
    $("#aws_upload_form").submit(function (e) {
        e.preventDefault();
        var form_data = new FormData(this); //Creates new FormData object

        var selectedFile = document.getElementById('fileInput');
        var nameOfFile = selectedFile.files.item(0).name;

        if (nameOfFile.length > 0) {
            $("#selectedFile").html(nameOfFile);
            $.ajax({
                url: apigw_endpt + "/generate_presigned_url",
                data: {
                    file_name: nameOfFile
                },
                type: "GET",
                dataType : "json",
                success: function (json) {
                    handleData(json, form_data);
                },
                error: function( xhr, status, errorThrown ) {
                    jq_ui_alert( 'dialog-message', "Sorry, there was an AJAX problem with ..." );
                    console.log( "Error: " + errorThrown );
                    console.log( "Status: " + status );
                    console.dir( xhr );
                }
            });
        } else {
            alert("No File Selected");
        }
    });
});

function handleData(json, form_data) {
    $.ajax({
        url: json.fields,
        type: 'PUT',
        contentType: 'image/jpeg',
        data: form_data,
        processData: false
    });
}

感谢您的帮助。

Answer 1

我刚刚开始工作。我补充说：

headers: { 'x-amz-acl': 'public-read' },

进入handleData函数ajax调用