概要

一度、FileReader.readAsArrayBufferで読み込んだ状態から画像表示用のDataURLを生成する。
FileReader.readAsArrayBuffer()で読み込んだバイナリデータをバイナリ文字列に変換してからbase64にエンコードする必要がある。

実装

JavaScript

/// Base64変換を小分けにする
const APPLY_MAX = 1024;
let encodedStr = "";
for (var i = 0; i < this.reader.result.byteLength; i += APPLY_MAX) {
    encodedStr += String.fromCharCode.apply(null, new Uint8Array(this.reader.result.slice(i, i + APPLY_MAX)));
}
encodedData = window.btoa(encodedStr);

※reader.resultには、FileReader.readAsArrayBuffer()で読み込んだバイナリがある前提

HTML側

<img src={`data:image/*;base64,${encodedData}`} />

※Reactの実装になっているので適時読み替えること

NG実装

JavaScript

const str = String.fromCharCode.apply(null, new Uint8Array(reader.result));
encodedData = window.btoa(str); // base64へ

こちらだと、ファイルサイズ（reader.resultの配列のサイズ）が大きい場合に、applyで再起回数が限界を超えてエラーが出る。

参考

Maximum call stack size exceeded エラーの解決策【applyの限界】