input file のファイルアップロードによるサムネイルの表示とfile apiのメモリ消費について

Question

input[type="file"]をつかって、ファイルをアップロード後にサムネイル表示ができるものを作成しました。

(vue.jsで作成。アップロードしたfile obvectの取得後)

    let file = this.listingFile.file
    if ( file && window.FileReader && file.type.match(/image/) ){
      if( !file.type.match(/svg/) ) {
        let reader = new FileReader()
        let self = this
        reader.onload = function(file){
          self.thumb = reader.result
        }
        reader.readAsDataURL(file)
      }
    }

表示はできたのですが、ここで質問です。

大量のファイル数をアップロードを行いたい場合、
手元の端末・ブラウザで検証してみた結果、
一桁kb程度のファイルが100以上の場合は滞りなく表示できたのですが、
30～50MBのファイルを4つアップロードすると、ブラウザが落ちてしまいました。

メモリ(？)を食うんだろうな～という想像はしていたのですが、
では、遅延ロードにあたるようなことを用いて、メモリをクリアしながら大量のファイルのサムネイルを生成することはできるのでしょうか？

Answer 1

filereaderを一気にしているなら
読んでは処理して捨てる処理を順番にしてみてはどうでしょうか？

Comments

[nieve]

昨日、コード作成して試してクラッシュしてたのですが。。。
今日はクラッシュせずで。。。

上記コード、
複数ファイルをアップロード
↓
アップロード情報を受け取る
↓
各ファイル情報を受け取る
↓
各ファイルを処理する　←　ここの部分　に記載しているので、一気にしているとも言いがたく。。

結果を変数に渡したあと、rendar.result = null とかしてみたのですが、
大きくは変わらないかも。。

ということで、もうちょい検証してみます。

ありがとうございます！