【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;

[javascript]
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を用いたアップロードの主な処理は終了。

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

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