144

AngularJS から node.js サーバーへの単純なマルチパート フォーム ポストを実行したいのですが、フォームには、一方の部分に JSON オブジェクトが含まれ、もう一方の部分に画像が含まれている必要があります (現在、$resource を使用して JSON オブジェクトのみを投稿しています)。

input type="file" から始めるべきだと思ったのですが、AngularJS はそれにバインドできないことがわかりました..

私が見つけることができるすべての例は、ドラッグ アンド ドロップ用の jQuery プラグインをラップするためのものです。1 つのファイルを簡単にアップロードしたい。

私は AngularJS を初めて使用し、独自のディレクティブを作成することにまったく慣れていません。

4

7 に答える 7

189

angularjs 以外の依存関係がない実際に機能するソリューション (v.1.0.6 でテスト済み)

html

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6) は「input-file」タグでng-modelをサポートしていないため、ユーザーから (最終的に) 選択されたすべてのファイルを渡す「ネイティブな方法」で行う必要があります。

コントローラ

$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

クールな部分は、未定義のcontent-type とtransformRequest: angular.identityで、$http で正しい「コンテンツ タイプ」を選択し、マルチパート データを処理するときに必要な境界を管理する機能を提供します。

于 2013-07-06T15:39:43.883 に答える
43

シンプル/軽量のng-file-uploadディレクティブを使用できます。FileAPI フラッシュ shim を使用して、非 HTML5 ブラウザーのドラッグ & ドロップ、ファイルの進行状況、およびファイルのアップロードをサポートします。

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
  Upload.upload({
    url: 'my/upload/url',
    file: $files,            
  }).progress(function(e) {
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  }); 

}];
于 2013-08-24T16:53:49.640 に答える
5

私はちょうどこの問題を抱えていました。したがって、いくつかのアプローチがあります。1 つ目は、新しいブラウザが

var formData = new FormData();

サポートが最新のブラウザーに限定されている方法についての情報が記載されたブログへのこのリンクをたどってください。それ以外の場合は、この問題を完全に解決します。

それ以外の場合は、ターゲット属性を使用してフォームを iframe に投稿できます。フォームを投稿するときは、表示プロパティが none に設定された iframe にターゲットを設定してください。ターゲットは iframe の名前です。（ちょうどあなたが知っているので。）

これが役立つことを願っています

于 2012-12-19T23:50:44.140 に答える
3

これが遅いエントリであることは承知していますが、簡単なアップロード ディレクティブを作成しました。すぐに働ける！

<input type="file" multiple ng-simple-upload web-api-url="/api/post"
       callback-fn="myCallback" />

ng-simple-uploadを Github に追加し、Web API を使用した例を示します。

于 2016-02-16T11:30:20.163 に答える
2

次のよう$resourceに、リソースの params 属性にデータを割り当てることでアップロードできます。actions

$scope.uploadFile = function(files) {
    var fdata = new FormData();
    fdata.append("file", files[0]);

    $resource('api/post/:id', { id: "@id" }, {
        postWithFile: {
            method: "POST",
            data: fdata,
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        }
    }).postWithFile(fdata).$promise.then(function(response){
         //successful 
    },function(error){
        //error
    });
};
于 2016-03-30T09:17:13.983 に答える
1

AngularJs の単純なアップローダー用に (もちろん既存のものから) 単純なディレクティブを作成しました。

(正確な jQuery アップローダ プラグインはhttps://github.com/blueimp/jQuery-File-Uploadです)

AngularJs を使用したシンプルなアップローダー (CORS 実装あり)

（サーバー側はPHP用ですが、ノードも簡単に変更できます）

于 2013-05-26T09:34:40.857 に答える