FormData 和 Blob答案

【问题标题】：FormData and BlobFormData 和 Blob
【发布时间】：2016-02-01 06:19:10
【问题描述】：

我正在压缩一个文件，然后上传它。 zip 例程返回一个 Blob，我将 Blob 附加到 FormData 对象，然后尝试使用 $.ajax 上传它。当我查看调试器的网络选项卡时，我看不到任何数据。这是部分代码

function zipTheFileAndUpload() {
    console.log("zipTheFileAndUpload");
    var buf = fs.readFileSync(model.currentPath,'utf8');
    console.log("shippingFileRead length is" + buf.length);
    var zip = new JSZip();
    zip.file("zipped", buf);
    var zipped = zip.generate({type:"blob", compression: "deflate", compressionOptions: {level:6}});
    console.log("File is zipped length is " + zipped.size);
    var formData = new FormData();
    formData.append('file', zipped);
    $.ajax
      ({
        dataType: "json",
        type: "POST",
        contentType: false,
        data: formData,
        url: transmissionURL,
        headers: shippingGetHeaders(zipped.size),
        cache: false,
        processData: false,
        success: function (returnedData, textStatus, jqXHR){
            console.log("transferTheFile success returned data " + returnedData);

        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("transferTheFile error " + textStatus);
            abortTheTransfer(textStatus);
        },
        complete: function(jqXHR, textStatus) {
            console.log("transferTheFile complete " + textStatus);
        }
    });
}

从调试器的网络选项卡：

Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
category:proof
Content-Length:642909
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarycf8nFVTF1p8qps5q
endPage:3
Origin:file://
Project:B50061
sig:Required
spread:Nutella
startPage:2
type:BT
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
UserId:
Request Payload
------WebKitFormBoundarycf8nFVTF1p8qps5q

Content-Disposition: form-data; name="file"; filename="blob"

Content-Type: application/zip





------WebKitFormBoundarycf8nFVTF1p8qps5q--

【问题讨论】：

Chrome 开发工具在请求中没有显示多部分文件数据，我记得它曾经在那里，但它很慢而且不是很有用。

标签： javascript blob multipartform-data

【解决方案1】：

就像 Musa 所说，Chrome 开发工具不会显示内容。例如，Firefox 开发工具展示了它。为了检查 Chrome 上的行为，我使用了一个简单的 zip 文件

var zip = new JSZip();
zip.file("file1", "content1");
zip.file("file2", "content2");

我使用 tcpdump 查看实际发送到服务器的内容：

POST /post HTTP/1.1
Host: localhost
[...]
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.97 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2ioqT61Q2bGfBUOl
[...]

------WebKitFormBoundary2ioqT61Q2bGfBUOl
Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: application/zip

PK..
.......?H.1(,............file1content1PK..
.......?Hq`!.............file2content2PK....
.......?H.1(,..........................file1PK....
.......?Hq`!.......................+...file2PK..........f...V.....
------WebKitFormBoundary2ioqT61Q2bGfBUOl--

您可以在此处清楚地看到 zip 文件的内容，但 Chrome 仅在其开发工具中显示：

------WebKitFormBoundary2ioqT61Q2bGfBUOl
Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: application/zip


------WebKitFormBoundary2ioqT61Q2bGfBUOl--

【讨论】：