我有一个API端点,必须向其发送一个由两部分组成的多部分HTTP请求:file
(文件系统文件)和data
(JSON对象)。
经过一些研究,我发现如何在AngularJS中进行多部分请求:
$http({
method: 'POST',
url: url,
headers: {
'Content-Type': 'multipart/form-data'
},
data: {
data: model,
file: file
},
transformRequest: customFormDataObject
});
1) customFormDataObject
函数最初的形式如下:
customFormDataObject formDataObject = function (data, headersGetter) {
var fd = new FormData();
angular.forEach(data, function (value, key) {
fd.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return fd;
};
这种实现的结果是请求的各个部分没有设置contentType
。
2) 在阅读了更多信息之后(https://dev59.com/OWAf5IYBdhLWcg3wizME#24535293),我尝试使用Blob来解决这个问题,customFormData
对象看起来像这样(有点混乱,基本上第一部分将是contentType
application/json
,第二部分将是image/png
):
customFormDataObject = function (data, headersGetter) {
var fd = new FormData();
var contentType = 'application/json';
angular.forEach(data, function (value, key) {
fd.append(key, new Blob([JSON.stringify(value)], {
type: contentType
}));
contentType = 'image/png';
});
var headers = headersGetter();
delete headers['Content-Type'];
return fd;
};
第二种方法为请求的每个部分设置了正确的contentType
,但它并未为这些部分设置任何值。
基本上,以下是发生的情况:1)在多部分中设置了正确的值,但没有设置contentType
。 与2)设置了contentType
,但是没有设置多部分的值。
我是否漏掉了什么? 这个功能难道不应该像这样工作吗?
谢谢!
delete headers['Content-Type'];
时,请求的内容类型会自动设置。 - Adrian Marinicafile
已经是一个Blob
,JSON.stringify
不会序列化文件内容,而是会序列化file
的属性(如果有的话)。 - a better oliver