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

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

【CMS】WordPress専用 クラウド / サーバー『WebSpeed』

【CMS】WordPress専用 クラウド / サーバー『WebSpeed』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【コミュニケーションアプリ開発】LINE アプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【ECサイト構築】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【音声アプリ開発】Twilio アプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【CPU】AMD EPYC 技術検証(PoC)サービス

【CPU】AMD EPYC 技術検証(PoC)サービス

【Webシステム / サービス開発】SEKARAKU Lab(セカラクラボ)

【Webシステム / サービス開発】SEKARAKU Lab(セカラクラボ)

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

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

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
317
facebook twitter はてなブックマーク

この記事をかいた人

About the author

長谷竜弥

新卒にて株式会社ビヨンドに入社。

Webシステム開発(Webサービス・デジタルコンテンツ・業務管理システム などのブラウザで動くサービス、システムの開発)や、ゲームAPI(アプリゲームとの通信部分のプログラム開発)を行っている。

また、Shopify のプライベート / カスタムアプリの開発も行っている。

元々は大阪オフィスに勤めていたが、2019年に横浜オフィスに転勤。
趣味は野球 / カラオケ / アニメ