ionicで画像ファイルをWEBサーバーにアップロードする

ionicで画像ファイルをWEBサーバーにアップロードする

思い込みでやってみたら失敗した

現在お仕事でXamarinからionicへの置き換えをやっているのですが、ファイルアップロードが上手くいきませんでした。

APIコール用のメソッドをたくさん作っていたのですがアップロード問題にぶち当たるまで、すべてionic native APIのHTTPを使用していました。

ファイルアップロードの時も「HTTP APIのpostメソッド使えばいけるでしょ!」と何も考えずにトライした結果見事に失敗しました。。

ionicのバージョンは4.3.0betaです。

解決

「ionic http post image」でググったら、一番上に同じことで悩んでいるフォーラムの記事がヒットしました。

How to send image on http.post – ionic / ionic-v3 – Ionic
https://forum.ionicframework.com/t/how-to-send-image-on-http-post/108376

この中の回答にも書いていますが、File Transfer APIを使用しましょう!

File Transfer API使用方法

ドキュメントの通りに設定すれば良いのですが、一応使用方法を書き残しておきます。

ionic version3.* 系とは所々違いがありますので、ionic version3.*のドキュメントと照らし合わせながらお読みください。

プラグインをインストールします

$ ionic cordova plugin add cordova-plugin-file-transfer
$ npm install –save @ionic-native/file-transfer@beta

@NgModuleに追加します

いつも通りプラグインをインポートします

Moment.jsは必要ないですが、僕の場合は送信するファイル名に使用しています。

ファイル送信用のメソッドを作成します

ファイルパスを受け取ったら、そのファイルをサーバーへ送信するメソッドを作成しました。

まとめ

以上のように作成すれば(サーバー側の作りにもよると思いますが)動作するハズです。

上手くいかないと分かってからもImagePickerから返されるBase64文字列をデコードして送信しようとしたり、FileOpenerを使ってなんとかできないか模索したりと、そこそこ時間を無駄にしたので未来の自分への備忘録的に書き残しておきます。