我有一个API端点,必须向其发送多部分HTTP请求,该请求由两部分组成file(文件系统文件)和data(JSON对象)。
file
data
经过一些研究,我发现了如何在AngularJS中执行多部分请求:
$http({ method: 'POST', url: url, headers: { 'Content-Type': 'multipart/form-data' }, data: { data: model, file: file }, transformRequest: customFormDataObject });
1) 该customFormDataObject函数最初具有以下形式:
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设置。
contentType
Blob ,customFormData对象看起来像这样(有点混乱,基本上第一部分是of contentType application/json,第二个image/png):
customFormData
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的针对的multipart设置,但不是值。
我想念什么吗?该功能不应该这样工作吗?
谢谢!
在Angular中上传文件的最简单方法是:
var fd = new FormData(); fd.append('file', file); fd.append('data', 'string'); $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .success(function(){ }) .error(function(){ });
绝对重要的是config对象的以下两个属性:
transformRequest: angular.identity
覆盖Angular的默认序列化,使我们的数据保持不变。
headers: {'Content-Type': undefined }
让浏览器将正确地检测Content-Type为multipart/form-data,并填写正确的边界。
Content-Type
multipart/form-data
没有其他为我工作!由Louthan夫人的精彩博文提供。