浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javascript】promsieを利用してmultipleで選択された画像を順次アップロードする方法

前回multipleによって選択されたfilelistに格納された画像を一枚ずつfilereaderで読み込んで

アップロードする記事を書きましたが、今回はpromiseを用いた

アップロード方法を記載します。

 

promiseは、非同期で行われる処理をresolveとrejectによって返す値を分けて、処理が成功すれば

resolveの中に値が格納されて使うことができるオブジェクトです。

主な処理の流れは、return new promiseの中に行いたい処理を書いて、結果をthenを介して

resultとして値を受け取る。後はその下に処理を書くだけ。

成功と失敗を明示的に分けることができるので見やすさ書きやすさ共に易しいです〇。

filereaderと一緒に使うとこんな感じ。

</pre>
androidHandlerFile(e){
const that = this;
var files = [];
files = e;
let bundle_arr = [];
for (var i = 0; i < files.length; i++) {
var promise = that.pFileReader(files[i]);
promise.then(function (result) {
console.log(result)
bundle_arr.push(result);
that.setState({ image: bundle_arr });
})
}
}
<pre>[/javacript]</pre>
&nbsp;


pFileReader(file){
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.onload = () => {
resolve(reader.result )
};
reader.readAsDataURL(file);
});
}

 

promiseをforで囲っているのでmultipleで選択された画像も一枚ずつ拾えます。

promsieを取り込んだ変数はthen(function (result) {}が使えるので

そのままresultを何かの処理に利用できます。

これpromsieを用いたアップロードの主な処理は終了。

 

他にも複数の処理を直列並列で使うことができますが、今はその機会がないので

出番があり次第そちらも記載します。

  • この記事いいね! (0)