web-dev-qa-db-ja.com

AngularJs Ajax POSTファイルをアップロードしたフォーム

すでにAjaxを使用して構築されているAPIへのajaxリクエストを使用して送信されるフォームを設定しようとしています。何らかの理由で、ファイルをシステムに転送したくありませんが、これを処理するためのバックエンドがすでに構築されており、正常に動作します。

私のサービスは、私がここで見つけたチュートリアルに基づいてこのように見えます： http://badwing.com/multipart-form-data-ajax-uploads-with-angularjs/

addActivity: function(url){
    return $http({
        method: 'POST',
        url: REQUEST_URL + 'Volunteering/AddActivity?token=' + token + url,
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        data: {
            file: $scope.file
        },
        transformRequest: formDataObject
    }).
    then(function(result) {
        console.log(result);
        return result.data;
    });
},

私はそれが私が見逃している本当にほんのちょっとしたものだと感じています、誰かがいくつかの助けを提供できますか？

javascriptajaxangularjs
16
flashpunk

私も同様の問題に直面しました。

解決策はformDataを使用することです

var formData = new FormData();
formData.append("file", $scope.file);

そして交換する

data: {
    file: $scope.file
}

と

data: {
    formdata
}
14
Srisudhir T

angular + laravelでファイルのアップロードを実装するのに問題がありました。マルチパートフォームを送信しようとするたびに、サーバーはフォームデータを受信しませんでした。ようやく私はすべての問題を解決した [〜＃〜] this [〜＃〜] 記事を見つけました。

要するに、これは$ http呼び出しです。

var data = new FormData();

data.append("file", file);

$http.post("//myDomain.com/api/demo", data, {
    headers: { 'Content-Type': undefined },
    transformRequest: angular.identity
}).success(function (data, status, headers, config) {

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

});

Rolin.tencent.Shenzhenによる他の回答でも、設定Content-Type as undefinedとしてブラウザーに分類させます。

8
whtlnv

データはdata: $scope.file

そして重要なこと：'Content-Type': undefinedを使用すると、ブラウザに適切なコンテンツタイプが設定されます。

3
rolin.tencent.Shenzhen

あなたはこのプラグインを使うことができます、それも高度に設定可能です： https://github.com/danialfarid/ng-file-upload

1
Vishwajeet