AngularJS로 멀티파트 요청
나는 두 부분으로 구성된 멀티파트 HTTP 요청을 보내야 하는 API 엔드포인트를 가지고 있습니다.file
(파일 시스템 파일) 및data
(JSON 객체).
몇가지 조사 끝에 나는 Angular에서 멀티파트 요청을 하는 방법을 찾았습니다.JS:
$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) 다중 부분에 정확한 값이 설정되어 있지만,contentType
가 설정되어 있지 않습니다.2)와 함께contentType
의 값은 설정되지만 다중 부분에 대한 값은 설정되지 않습니다.
내가 뭘 빼놓았나요?이 기능은 이렇게 작동하면 안 되는 건가요?
감사합니다!
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(){
});
절대적으로 필수적인 구성 개체의 속성은 다음 두 가지입니다.
transformRequest: angular.identity
Angular의 기본 시리얼라이제이션을 덮어씌우고 데이터는 그대로 둡니다.
headers: {'Content-Type': undefined }
브라우저가 올바른 값을 탐지하도록 합니다.Content-Type
~하듯이multipart/form-data
, 그리고 정확한 경계를 채웁니다.
그 외에는 아무것도 안 통했어요!Luthan 부인의 멋진 블로그 게시물에 대해 알려드립니다.
당신은 이런 것을 시도해 본 적이 있습니까?
$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;
};
나는 그냥 똑같은 문제를 풀 뿐입니다.
몇 가지 테스트를 거친 후에, 당신이 설명한 상황이 있었습니다.
기본적으로 1) 멀티파트에 정확한 값이 설정되어 있지만 내용은유형이 설정되지 않았습니다.2) 내용과 함께유형은 설정되지만 다중 부분에 대한 값은 설정되지 않습니다.
이 문제를 해결하기 위해 $http Post 대신 Blobband Post Ajax를 사용해야 했습니다.
이 경우 $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://github.com/danialfarid/ng-file-upload/ 을 이용할 수 있습니다.
이 파일 업로더에는 위의 질문에서 말씀하신 것처럼 파일과 데이터(JSON 형식)를 따로 보내드리는 규정이 있습니다.
예:-
var upload = $upload.upload({
url: url,
file: file,
method: 'POST' or 'PUT', default POST,
headers: {'Content-Type': 'multipart/form-data'}, // only for html5
fileName: 'doc.jpg',
fileFormDataName: 'myFile',
data: {'data': model}
});
위 코드에서 POST 또는 PUT 요청은 'multipart/form-data', 파일 및 데이터 객체를 JSON으로 구분하여 전송할 수 있습니다.
자세한 정보는 위 링크를 방문하여 플러그인의 ReadMe.md 을 확인할 수 있습니다.
저의 접근 방식이 현재 당신이 따르고 있는 접근 방식과는 조금 다르지만, 목표는 같습니다.
이 문제를 해결하기 위해 제가 한 일은.
var formData = new FormData(document.getElementById('myFormId'));
그때는 내가 대신해서
var deferred = $q.defer();
$http.post('myurl', formData, {
cache: false,
contentType: false,
processData: false,
})
.success(function (response) {
deferred.resolve(response);
})
.error(function (reject) {
deferred.reject(reject);
});
return deferred.promise;
언급URL : https://stackoverflow.com/questions/28902727/multipart-request-with-angularjs
'programing' 카테고리의 다른 글
Sticky 사이드바: 아래로 스크롤할 때는 아래로, 위로 스크롤할 때는 위로 붙습니다. (0) | 2023.09.19 |
---|---|
버퍼 오버플로를 호출하려면 어떻게 해야 합니까? (0) | 2023.09.19 |
MySQL 쿼리 함수에서 '정의되지 않음'을 반환하는 NodeJS (0) | 2023.09.19 |
대규모 SQL에서 MongoDB로의 전송? (0) | 2023.09.19 |
atoi vs atol vs strtol vs strtoul vs sscanf (0) | 2023.09.19 |