【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中！

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【TypeScript】 ionic2 で画像をアップロードする処理【Transfer】

2017.03.10

Webシステム開発

目次 [非表示]

1 プラグインをインストール
2 使用例
3 説明
4 終わりに

開発チームの長谷です！

今回はionic2で画像（ファイル）をアップロードする処理について書きたいと思います。
cordova-plugin-file-transfer というプラグインを使用します。

プラグインをインストール

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

1	`$ ionic plugin add cordova-plugin-file-transfer`

使用例

import { Transfer } from ‘ionic-native’;
 
@Component({省略})
 
export class FileUpload{
 
    fileTransfer = new Transfer();
 
    constructor({省略}){
    }
 
    upload(){ 
        let options: any; 
 
        options = { 
                    fileKey: 'file',
                    fileName: 'name.jpg',
                    headers: {} 
                    ..... 
    }
 
    this.fileTransfer.upload(
                            "file path", 
                            "server path",
                            options,
                            false
    ) .then((data) => {
 
    // success
 
    }, (err) => {
 
    // error
 
    }) 
}

説明

上ソース22行目が実際に画像をアップロードする処理になります。

1	`upload(file path, server path, options, trustAllHosts)`

uploadはサーバーにファイルを送信するためのメソッドです。
それぞれ引数について説明すると

引数

タイプ

詳細

file path

string

画像のパスを指定

server path

string

画像を保存する先のサーバーパスを指定

options

FileUploadOptions

fileKey	フォームの要素を指定(デフォルト:file)
fileName	サーバーにファイルを保存するときの名前を指定(デフォルト:image.jpg)
httpMethod	HTTPメソッドをPUTかPOSTどちらか指定(デフォルト:POST)
mimeType	MIMEタイプを指定(デフォルト:image/jpeg)