jQuery上传到Public S3 Bucket提供------ WebKitFormBoundary

Question

我有一个网页，该网页获取公共S3存储桶名称和用于上传的唯一文件名。我正在使用jQuery从JavaScript进行上传。该文件已上载，但多部分信息已添加到损坏该文件的文件之前。

我尝试了不同的jQuery ajax参数，例如使contentType'image / jpeg'并尝试使用PUSH而不是PUT。我什至尝试手动将文件手动添加到新的FormData（）对象，如下所示。

我不明白如何编写一个简单的CURL命令，该命令没有问题，但是我无法使用jQuery提交HTML表单。我觉得使用jQuery时，它会被塞住，并且无法在S3存储桶侧正确放置。

的HTML

<form id="upload-image-form" className="clearfix" method="PUT" enctype="multipart/form-data">
<input id="product-images-add-btn" name="product-images-add-btn" type="file" onChange={this.startImageUpload} />
</form>

Java脚本

$("#upload-image-form").submit(function(e)
{
    e.preventDefault();

    var formURL = $(this).attr('action');
    //var formData = new FormData($("#product-images-add-btn")[0]);  
    var formData = new FormData();
    formData.append("file", $("#product-images-add-btn")[0].files[0]);          

    $.ajax({
        url:         formURL,
        type:        "PUT",
        data:        formData,
        crossDomain: true,
        contentType: false,
        processData: false,
        success:     function(data, textStatus, jqXHR)
        {
            console.log('Successful image upload!');
            //tempThis.finishImageS3Upload();
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            console.error("Image upload error.");
        }
    });
    return false;
});



startImageUpload: function(){
    var input = $("#product-images-add-btn");
    var files = input[0].files;
    var fileTypes = [".gif",".jpg", ".png"];

    console.log("--- DEBUG. Number of files: "+files.length);

    var tempThis = this;

    if(files.length > 0)
    {
        var ext = input.val().match(/\.([^\.]+)$/)[0];

        if(fileTypes.indexOf(ext) > -1)
        {
            var file = files[0];
            var assetData = {
                "filename":    file.name,
                "filesize":    file.size,
                "type":        "IMAGE",
                "format":      file.type
            };


            $.ajax({
                url: "/getImageUploadS3Info",
                cache: false,
                contentType: 'application/json',
                crossDomain: true,
                data: assetData,
                success: function(s3Info){
                    s3Info.filename = file.name;
                    tempThis.uploadImageS3(s3Info);
                },
                error: function(a, x, e){
                    console.error("getS3InfoForUpload() ajax error.");
                }
            });

        }
        else
            console.warn("--- DEBUG. File extension "+ext+" not allowed.");
    }
    else
        console.log("--- DEBUG. No files to upload.");
}


uploadImageS3: function(s3Info){
    if(s3Info.hasOwnProperty("assetId"))
    {        
        $("#upload-image-form").attr('action', s3Info.httpUrl)
            .data('assetId', s3Info.assetId);

        console.log("--- DEBUG: submitting form.");
        $("#upload-image-form").submit();
    }
    else
        console.warn("--- ERROR: the response for getImageUploadS3Info wasn't correct.");

}

S3文件

------WebKitFormBoundaryluTBbSMgcV0BEJcC
Content-Disposition: form-data; name="file"; filename="NewGrass.jpg"
Content-Type: image/jpeg

<image byte info stuff>

Answer 1

在 Firefox（最新）、Chrome（最新）和 IE10、IE11 和 Edge 中进行测试后，该解决方案确实非常有效！这里不需要 jquery 的 ajax 方法的开销。浏览器（即 IE）确实获取了 XMLHttpRequest 对象。这将完成 S3 的工作，但我仍在研究使用 jQuery 的 $.ajax() 方法的解决方案，以实现 100% 跨浏览器兼容性（但我们不支持 IE9，因此我们不需要） ：

function sendToServer (imgFile) {
    var dateTime = new Date().getTime(),//used for file name
        url = '//bucketUrl?fileName=image' + dateTime + '.png',
        xhr = new XMLHttpRequest(),
        fd = new FormData(),
        fileBlob = dataURItoBlob(img);

    fd.append('file', fileBlob);

    xhr.open('POST', url, true);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // Every thing ok, file uploaded
            console.log(xhr.responseText); // handle response.
        }
    };

    xhr.send(fd);
}

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString,
        byteStringLength,
        mimeString,
        ia,
        i = 0;

    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(dataURI.split(',')[1]);
    }
    else {
        byteString = unescape(dataURI.split(',')[1]);
    }

    byteStringLength = byteString.length

    // separate out the mime component
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    ia = new Uint8Array(byteStringLength);

    for(; i < byteStringLength; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {
        type: mimeString
    });
}

看来您在发送之前忘记编码为 blob。这可能就是您所需要的。获取该decodeURItoBlob 函数并查看该逻辑是否适用于您的jquery ajax 方法...否则，您可以使用javascript xhr 来发送它。