AngularJSでFormDataをPOSTする(ファイルのアップロードする)

  • 60
    Like
  • 1
    Comment
More than 1 year has passed since last update.

概要

AngularJSでFormDataをPOSTしたいときがある。
たとえばFileをアップロードするときとか、$httpをそのまま使ってもうまく行かない。
というのも、$httpのpostはデフォルトではContent-typeがapplication/jsonだからだ。
もちろんRequestはjsonにエンコードされる。
なので、適切なContent-typeとエンコードにする必要がある。

FormData?

var formData = new FormData();
formData.append('formのnameにあたる部分','内容');

って感じでつかうやつ。
内容の部分はファイルの場合はもちろんファイルになる。
このformDataをそのままpostの第二引数に渡す。

ファイル?

input type="file"のchangeイベントを捕まえたり、ドラッグ&ドロップを捕まえる。
そういうディレクティブ作るとよい。

POSTのやり方

やっと本題。

$http.post('upload先',formData,
{
    headers:{"Content-type":undefined}
    ,transformRequest: null
});

こんだけ。
Content-typeはundefinedにしておけば適切な形にしてくれる。
transformRequestはRequestをどんな感じに変形するかということで、この場合特に処理する必要が無い。
ので、nullにしておけばjsonにされることもなくなる。
ちなみにここをangular.indentityにして引数をそのまま返すようなサンプルがあったけど、その方が良い理由ってなんだろう?
(Requestがそのままの形であるってことが明示されてるからわかりやすいとか?)