javascript - 在多部分/表单数据上传的各个部分设置内容长度 header

Question

我想使用 multipart/form-data 类型的发布请求上传多个文件，对于每个文件，我需要知道服务器端的文件大小(内容长度)。

为了在 javascript 中构造 POST 请求，我使用了一个 FormData 对象，并将要上传的 File 对象附加到它。这工作正常，但是除了 Content-Disposition header 之外，每个部分只添加了一个 Content-type header ，但没有 Content-length header ，尽管此信息可从各个文件对象中获得。

有没有办法实现在发送请求时为 FormData 对象的每个部分设置 Content-length header ？

下面是我使用的代码，包括我解决问题的方法。它实际上使用 angular-js 发送请求，但我认为这与问题无关。

var form = new window.FormData();

form.append('additional-field-1', new Blob(['some plain text'], {type : 'text/plain'}));

for (var file in fileList) {
    var fileObj = fileList[file];
    var count = 1 + parseInt(file, null);
    form.append('file-size-' + count, new Blob([fileObj.size], {type : 'text/plain'}));
    form.append('file-' + count, fileObj);
}

$http.post(url, form, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
}).success(.....

Answer 1

我认为没有办法为每个表单数据元素实际添加自定义 header 。但是，为什么不将它作为文件名的一部分添加到内容配置 header 中:

data = new FormData();
data.append('additional-field-1', new Blob(['some plain text'], {type : 'text/plain'}));

for (var i = 0; i< $( '#file' )[0].files.length; i++) {
   var fileObj = $( '#file' )[0].files[i];
   data.append( '{ size : ' + fileObj.size + ' }' , $( '#file' [0].files[i], $( '#file' )[0].files[i].name );
}

我不确定你是如何在服务器上处理这个的，但请求看起来像这样:

------WebKitFormBoundarysZxMHYOzMkqDmOvR
Content-Disposition: form-data; name="additional-field-1"; filename="blob"
Content-Type: text/plain


------WebKitFormBoundarysZxMHYOzMkqDmOvR
Content-Disposition: form-data; name="{ size : 22984 }"; filename="MatrixArithmetic.vshost.exe"
Content-Type: application/x-msdownload


------WebKitFormBoundarysZxMHYOzMkqDmOvR
Content-Disposition: form-data; name="{ size : 187 }"; filename="MatrixArithmetic.vshost.exe.config"
Content-Type: application/xml


------WebKitFormBoundarysZxMHYOzMkqDmOvR--