FormData和Blob

时间:2016-01-30 13:56:15

标签: javascript blob multipartform-data

我正在压缩文件然后上传它。 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--

1 个答案:

答案 0 :(得分:2)

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