使用AngularJS的分块请求
我有一个必须向其发送多部分HTTP请求的API端点，该请求由两部分组成：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://stackoverflow.com/a/24535293/689216)之后，我尝试使用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)，在multiparts中设置了正确的值，但没有设置contentType。对于2)，设置了contentType，但没有设置multiparts的值。
我是不是遗漏了什么？这个功能不应该是这样工作的吗？
谢谢!
回答 5
Stack Overflow用户
发布于 2016-09-17 18:32:13
在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，并填充正确的边界。
其他的对我都不起作用！由洛桑夫人的wonderful blogpost提供。
Stack Overflow用户
发布于 2015-03-09 23:35:40
你有没有尝试过这样的东西：
$httpProvider.defaults.transformRequest = function(data) {
if (data === undefined){
return data;
}
var formData = new FormData();
for (var key in data){
if(typeof data[key] == 'object' && !(data[key] instanceof File)){
formData.append(key, JSON.stringify(data[key]));
}else{
formData.append(key, data[key]);
}
}
return formData;
};Stack Overflow用户
发布于 2015-07-24 01:04:56
我只是解决了完全相同的问题。
经过一些测试后，我遇到了您所描述的情况：
基本上发生的情况是: 1)在多部分中设置了正确的值，但没有设置contentType的值。使用2)设置contentType，但不设置multipart的值。
为了解决这个问题，我不得不使用Blob和Post Ajax，而不是$http Post。
在这种情况下，$http似乎不能正常工作。
代码：
var formData = new FormData();
var blobId = new Blob([100], { 'type':'text/plain' });
formData.append('testId', blobId);
var blobImage = fileService.base64ToBlob(contentToDecode, 'image/jpeg');
formData.append('file', blobImage, 'imagem' + (i + 1) + '.jpg');请求：
$.ajax({
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(response) {
deferred.resolve(response);
$rootScope.requestInProgress = false;
},
error: function(error) {
deferred.reject(error);
$rootScope.requestInProgress = false;
}
});https://stackoverflow.com/questions/28902727
复制相似问题