programing

AngularJS로 멀티파트 요청

starjava 2023. 9. 19. 20:40
반응형

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

반응형