web-dev-qa-db-ja.com

Angularを使用するとファイルを送信することが難しいのはなぜですか？

ファイル（非常に大きなファイル）をサーバーに送信する必要があります。私はどのようなオプションがあり、どのように実行するかを勉強しています。 angular + express + nodejsを使用しています。

シンプルなフォームを使用すると、multerを使用してサーバー上のファイルを問題なくキャッチできます。とてもシンプルです。 htmlは単なるフォームであり、ターゲットなどを指定すると、すべてが機能します。 nodejsコードも非常にシンプルで簡単です。

私がangularを使用しようとするとすぐに、すべてが信じられないほど複雑になります。つまり、ディレクティブを使用する必要がありますが、それでもサーバーに問題があります。言ったように、データが「multipart/form-data」である必要があるmulterを使用しており、サーバーから「エラー：マルチパート：境界が見つかりません」

Angularでファイルをロードするための多くのモジュールがあります。これは、それが複数のソリューションで繰り返し発生する問題であることを示しています。今、私はコードを投稿したくないので、そのため 私はスタックオーバーフローで尋ねました です。私の質問はもっと微妙です：

なぜ単純なフォームで何ができるのですか？悪い意味ではありません。 「理解したい」という意味です。

javascriptweb-developmentangularjs
19
cauchy

Angularはシングルページアプリケーション用であり、フォームはAJAX=を使用して送信され、ページの再読み込みを回避します。AJAXでマルチパートフォームを送信するには、ブラウザがFormData（IE10 +）をサポートしている必要があります： http://caniuse.com/#search=FormData

https://developer.mozilla.org/en-US/docs/Web/API/FormData

ngModelはinput [type = "file"]では機能しないため、独自のディレクティブを作成する必要があります。独自のディレクティブは単純でなければなりません。変更時に、スコープのFileオブジェクトを更新します。

フォームを送信するときに、FormDataオブジェクトを作成し、FormData.setまたはFormData.appendを使用してファイルを追加します。 $httpまたは$resourceを使用してFormDataを送信でき、コンテンツタイプと境界の設定はブラウザに依存しています。

var formData = new FormData();
formData.append('file', $scope.file);
$http.post('yourUrl', formData, {
   transformRequest: angular.identity,
   headers: {'Content-Type': undefined}
}).then(function () {
   // ...
});

angular.identityは、Angular=データのシリアル化など）を防止します。

私はこの記事をお勧めします： https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

22
Thomas Roch