どんな事でもお気軽にお問い合わせください
06-6567-0924

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


開発チームの長谷です!

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

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

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

$ 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行目が実際に画像をアップロードする処理になります。

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)
trustAllHosts boolean 基本falseでOK

となります。
公式サイトに詳しい説明が書かれています(英語ですが…)
以上で画像アップロード処理についてご説明させていただきました

終わりに

Transferプラグインは画像のアップロードだけでなくダウンロードの処理も可能です。
今回はアップロード処理の説明だけ致しましたが、需要があればダウンロード処理の説明もしたいと思いますので
よろしくお願いします。


お問い合わせ 採用情報 エンジニアブログ
ISO27001認証
Contact PageTop
株式会社ビヨンド

© beyond Co., Ltd. All rights reserved.

mautic is open source marketing automation