【javascript】input Fileでmultipleプロパティを付与して画像を複数アップロードする

今回は,multipleで選択した画像を複数アップロードする方法を載せていきたいと

思います。

一般的に画像をアップロードするときは

 

</pre>
<input type="file" id="file" accept="image/*" value="" onChange={e =>this.androidHandlerFile(e.target.files)} />
<pre>

 

のように設定を追加していきますが、画像を複数持たせてアップロードしたい時は

multipleプロパティを以下のようにして追加します。

 

</pre>
<input type="file" id="file" accept="image/*" value="" onChange={e =>this.androidHandlerFile(e.target.files)} multiple="multiple"/>
<pre>

 

なぜこれが必要かというと、このプロパティが無いと画像を複数アップロードできないためです。

androidでは一つの画像をドラッグすることで複数選択できるようになります。

選んだファイル群は以下の関数の中で処理をしていきます。

 

</pre>
androidHandlerFile(e){
const that = this;
let bundle_arr = [];
var file = [];
file = e;
for (var i = 0; i < file.length; i++) {
var reader = new FileReader();
reader.onload = function(event) {
bundle_arr.push(event.target.result);
}
reader.readAsDataURL(file[i]);
}
that.setState({ image: bundle_arr });
}
<pre>

 

以下関数・変数の役割説明↓

・file = e : multipleで選択したファイル群

・reader.readAsDataURL(file[i]) : 現在処理をしているファイル。base64に変換される。

・event ： 処理が終了したファイル。ここから配列にpushしていく

 

reader.onload内でファイルを扱ったsetStateはできないので、一旦bundle_arrにpushした後

に外へ出してsetStateしています。

ここまでくればあとは自由に画像を使えるので、最後に<img src={props.images[index]} />

で画像を一枚ずつ格納して終了になります。

※ESLintを使っていてreader.onload = function(event) {}の中にほいほい変数を置くと

Function declared in a loop contains unsafe references to variable(s)で警告を

受けるので注意してください。