Angularjs $http 투고 파일 및 폼 데이터

Angularjs $http 투고 파일 및 폼 데이터

아래 python에 대한 요청이 있습니다.

import requests, json, io

cookie = {}
payload = {"Name":"abc"}
url = "/test"
file = "out/test.json"

fi = {'file': ('file', open(file) )}
r = requests.post("http://192.168.1.1:8080" + url, data=payload, files=fi, cookies=cookie)
print(r.text)

파일 및 폼필드를 백엔드로 전송합니다.Angular $http에서 동일한 작업(파일 보내기 + 양식 필드)을 수행하려면 어떻게 해야 합니까?지금은 마음에 드는데 어떻게 파일을 보내야 할지 모르겠어요.

var payload = {"Name":"abc"};
$http.post('/test', payload)
    .success(function (res) {
    //success
});

파일 업로드와 사용자 토큰 정보를 동시에 보내야 할 때도 비슷한 문제가 있었습니다. transformRequest형성과 함께FormData도움이 되었다:

        $http({
            method: 'POST',
            url: '/upload-file',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            data: {
                email: Utils.getUserInfo().email,
                token: Utils.getUserInfo().token,
                upload: $scope.file
            },
            transformRequest: function (data, headersGetter) {
                var formData = new FormData();
                angular.forEach(data, function (value, key) {
                    formData.append(key, value);
                });

                var headers = headersGetter();
                delete headers['Content-Type'];

                return formData;
            }
        })
        .success(function (data) {

        })
        .error(function (data, status) {

        });

파일 가져오기용$scope.file커스텀 디렉티브를 사용했습니다.

app.directive('file', function () {
    return {
        scope: {
            file: '='
        },
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var file = event.target.files[0];
                scope.file = file ? file : undefined;
                scope.$apply();
            });
        }
    };
});

HTML:

<input type="file" file="file" required />

웹에 글을 올릴 때처럼 Pavel의 답변을 얻을 수 없었습니다.API 어플리케이션

이 문제는 헤더를 삭제하는 데 있는 것으로 보입니다.

headersGetter();
delete headers['Content-Type'];

브라우저가 경계 파라미터와 함께 Content-Type을 디폴트로 설정할 수 있도록 하기 위해 Content-Type을 undefined로 설정해야 합니다.Pavel의 예에서는 경계를 설정하지 않았기 때문에 400 HTTP 예외가 발생했습니다.

여기서 중요한 것은 위의 헤더를 삭제하는 코드를 삭제하고 헤더의 콘텐츠유형을 수동으로 늘로 설정하는 것입니다.따라서 브라우저가 속성을 설정할 수 있습니다.

headers: {'Content-Type': undefined}

여기 완전한 예가 있습니다.

$scope.Submit = form => {
                $http({
                    method: 'POST',
                    url: 'api/FileTest',
                    headers: {'Content-Type': undefined},
                    data: {
                        FullName: $scope.FullName,
                        Email: $scope.Email,
                        File1: $scope.file
                    },
                    transformRequest: function (data, headersGetter) {
                        var formData = new FormData();
                        angular.forEach(data, function (value, key) {
                            formData.append(key, value);
                        });
                        return formData;
                    }
                })
                .success(function (data) {

                })
                .error(function (data, status) {

                });

                return false;
            }

최근에 네이티브 다중 파일 업로드를 지원하는 지침을 작성했습니다.제가 만든 솔루션은 $http 서비스로 식별한 격차를 메우기 위해 서비스에 의존합니다.파일 및 데이터를 게시하기 위해 각도 모듈이 사용하기 쉬운 API를 제공하는 지시문도 포함했습니다.

사용 예:

<lvl-file-upload
    auto-upload='false'
    choose-file-button-text='Choose files'
    upload-file-button-text='Upload files'
    upload-url='http://localhost:3000/files'
    max-files='10'
    max-file-size-mb='5'
    get-additional-data='getData(files)'
    on-done='done(files, data)'
    on-progress='progress(percentDone)'
    on-error='error(files, type, msg)'/>

코드는 github에서 찾을 수 있고 문서는 제 블로그에서 찾을 수 있습니다.

웹 프레임워크에서 파일을 처리하는 것은 사용자에게 달려 있지만, 제가 만든 솔루션은 데이터를 서버로 전송하기 위한 각진 인터페이스를 제공합니다.작성해야 하는 각도 코드는 업로드 이벤트에 응답하는 것입니다.

angular
    .module('app', ['lvl.directives.fileupload'])
    .controller('ctl', ['$scope', function($scope) {
        $scope.done = function(files,data} { /*do something when the upload completes*/ };
        $scope.progress = function(percentDone) { /*do something when progress is reported*/ };
        $scope.error = function(file, type, msg) { /*do something if an error occurs*/ };
        $scope.getAdditionalData = function() { /* return additional data to be posted to the server*/ };

    });

제 실장을 한 번 봐주세요.다음 함수를 서비스로 래핑할 수 있습니다.

function(file, url) {
  var fd = new FormData();

  fd.append('file', file);

  return $http.post(url, fd, {
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined }
  });
}

주의해 주십시오.file인수는Blob만약 있다면base64파일 버전 - 쉽게 변경할 수 있습니다.Blob다음과 같이 합니다.

fetch(base64).then(function(response) {
  return response.blob(); 
}).then(console.info).catch(console.error);

HTML5를 사용하여 업로드할 수도 있습니다. 이 AJAX 업로더를 사용할 수 있습니다.

JS 코드는 기본적으로 다음과 같습니다.

  $scope.doPhotoUpload = function () {
    // ..
    var myUploader = new uploader(document.getElementById('file_upload_element_id'), options);
    myUploader.send();
    // ..
  }

HTML 입력 요소에서 읽을 수 있습니다.

<input id="file_upload_element_id" type="file" onchange="angular.element(this).scope().doPhotoUpload()">

솔루션을 다음에 제시하겠습니다.

// Controller
$scope.uploadImg = function( files ) {
  $scope.data.avatar = files[0];
}

$scope.update = function() {
  var formData = new FormData();
  formData.append('desc', data.desc);
  formData.append('avatar', data.avatar);
  SomeService.upload( formData );
}


// Service
upload: function( formData ) {
  var deferred = $q.defer();
  var url = "/upload"	;
  
  var request = {
    "url": url,
    "method": "POST",
    "data": formData,
    "headers": {
      'Content-Type' : undefined // important
    }
  };

  console.log(request);

  $http(request).success(function(data){
    deferred.resolve(data);
  }).error(function(error){
    deferred.reject(error);
  });
  return deferred.promise;
}


// backend use express and multer
// a part of the code
var multer = require('multer');
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../public/img')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.jpg');
  }
})

var upload = multer({ storage: storage })
app.post('/upload', upload.single('avatar'), function(req, res, next) {
  // do something
  console.log(req.body);
  res.send(req.body);
});

<div>
  <input type="file" accept="image/*" onchange="angular.element( this ).scope().uploadImg( this.files )">
  <textarea ng-model="data.desc" />
  <button type="button" ng-click="update()">Update</button>
</div>

여기서 설명한 바와 같이 http://ngmodules.org/modules/ngUpload에서 angularjs용 파일업로더 통합에 대해 알아볼 수 있는 다른 솔루션이 있습니다.

제 솔루션에서는

$scope.uploadVideo = function(){
    var uploadUrl = "/api/uploadEvent";


    //obj with data, that can be one input or form
    file = $scope.video;
    var fd = new FormData();


    //check file form on being
    for (var obj in file) {
        if (file[obj] || file[obj] == 0) {
            fd.append(obj, file[obj]);
        }
    }

    //open XHR request
    var xhr = new XMLHttpRequest();


    // $apply to rendering progress bar for any chunking update
    xhr.upload.onprogress = function(event) {
        $scope.uploadStatus = {
            loaded: event.loaded,
            total:  event.total
        };
        $scope.$apply();
    };

    xhr.onload = xhr.onerror = function(e) {
        if (this.status == 200 || this.status == 201) {

            //sucess

            $scope.uploadStatus = {
                loaded: 0,
                total:  0
            };


            //this is for my solution
            $scope.video = {};
            $scope.vm.model.push(JSON.parse(e.currentTarget.response));
            $scope.$apply();

        } else {
           //on else status
        }
    };

    xhr.open("POST", uploadUrl, true);

    //token for upload, thit for my solution
    xhr.setRequestHeader("Authorization", "JWT " + window.localStorage.token);


    //send
    xhr.send(fd); 
};

}

언급URL : https://stackoverflow.com/questions/16483873/angularjs-http-post-file-and-form-data