FormData和Blob

Question

我正在压缩一个文件并上传它。压缩程序返回一个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--

- user3821034

---

Chrome开发工具无法显示请求中的多部分文件数据，我记得以前有这个功能，但它很慢且不太有用。 - Musa

Answer 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--

- David Duponchel