文件上传 ajax：您的 POST 请求的正文格式不正确 multipart/form-data答案

【问题标题】：file upload ajax:The body of your POST request is not well-formed multipart/form-data文件上传 ajax：您的 POST 请求的正文格式不正确 multipart/form-data
【发布时间】：2017-08-12 19:07:08
【问题描述】：

我正在尝试使用 ajax 直接通过浏览器上传将文件上传到 s3

这是我的html

<form id="upload" action="//s3-ap-south-1.amazonaws.com/cushbudirect" method="POST" enctype="multipart/form-data">

    <input type="hidden" name="Content-Type" value="multipart/form-data" />
<input type="hidden" name="acl" value="private" />
<input type="hidden" name="success_action_status" value="201" />
<input type="hidden" name="policy" value="eyJleHBpcmF0aW9uIjoiMjAxNy0wMy0yMVQxNDoxMTozMFoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJjdXNoYnVkaXJlY3QifSx7ImFjbCI6InByaXZhdGUifSxbInN0YXJ0cy13aXRoIiwiJGtleSIsIiJdLFsiZXEiLCIkQ29udGVudC1UeXBlIiwibXVsdGlwYXJ0XC9mb3JtLWRhdGEiXSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwwLDUyNDI4ODAwMF0seyJzdWNjZXNzX2FjdGlvbl9zdGF0dXMiOiIyMDEifSx7IngtYW16LWNyZWRlbnRpYWwiOiJBS0lBSlJWRVhVVFRWTjROWUFSUVwvMjAxNzAzMjFcL2FwLXNvdXRoLTFcL3MzXC9hd3M0X3JlcXVlc3QifSx7IngtYW16LWFsZ29yaXRobSI6IkFXUzQtSE1BQy1TSEEyNTYifSx7IngtYW16LWRhdGUiOiIyMDE3MDMyMVQwODExMzBaIn1dfQ==" />
<input type="hidden" name="X-amz-credential" value="AKIAJRVEXUTTVN4NYAQ/20170321/ap-south-1/s3/aws4_request" />
<input type="hidden" name="X-amz-algorithm" value="AWS4-HMAC-SHA256" />
<input type="hidden" name="X-amz-date" value="20170321T081130Z" />
<input type="hidden" name="X-amz-signature" value="152c81d87fc8bbf2642e26b28f1c41b361e7285e835971b10c74ee6d7f03b5" />
<input type="hidden" name="key" value="hello.jpg" />
    <input type="file" name="file" id="image">
    <input type="submit" value="upload" name="upload">
</form>

$('#upload').submit(function (e) {
            e.preventDefault();
            //get form data
            var  data= new FormData($("#upload")[0]);
            console.log(JSON.stringify(data));
            $.ajax({
                url:$(this).attr('action'),
                method:"post",
                processData:false,
                data:image,
                contentType:'multipart/form-data',
                success:function (data) {
                   console.log(JSON.stringify(data));
                },
                error:function (err) {
                    console.log(JSON.stringify(err));
                }
            })
        });

但我从 aws xml 错误响应中得到以下错误。

您的 POST 请求的正文不是格式正确的 multipart/form-data。

我已经尝试过类似问题的解决方案，但没有一个对我有用。

但是，当我尝试不使用 ajax（普通表单提交）上传时，上传工作正常，所以我很确定这是form data的问题

console.log(JSON.stringify(data)); 返回{}。

【问题讨论】：

您传递数据是不是错字：图像？或者应该是数据：数据。加上通过 contentType: false.
<input type="hidden" name="Content-Type" value="multipart/form-data" /> 是错误的，在这里和您的政策中。 POST 标头 Content-Type 必须是 multipart/form-data，但在这里，在策略中，这是您实际上传的文件的 MIME 类型。

标签： javascript php jquery ajax amazon-s3

【解决方案1】：

尝试更改您的 ajax 函数，如下所示，让我知道它是否有效。

编辑：

$('#upload').submit(function (e) {
            e.preventDefault();
            //get form data
            var  data = new FormData($("#upload")[0]);
            console.log(JSON.stringify(data));
            $.ajax({
                url:$(this).attr('action'),
                type : 'PUT',
                processData:false,
                data:data,
                contentType:data.type,
                success:function (data) {
                   console.log(JSON.stringify(data));
                },
                error:function (err) {
                    console.log(JSON.stringify(err));
                }
            })
        });

【讨论】：

当我删除这个At least one of the pre-conditions you specified did not hold</Message><Condition>Bucket POST must be of the enclosure-type multipart/form-data时收到另一个错误消息@
@Jabaa 我编辑了答案请检查它是否有效。