Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.

ファイルを base64 でエンコードしようとした

最初に正解を書きます。

const Hoge = () => {
  const [file, setFile] = useState<File | null>(null);
  
  return (
    <>
      <p>ファイルを選択してボタンを押してね</p>
      <input type="file" onChange={e => setFile(e.target.files?.item(0) ?? null)} />
      <button onClick={() => if (file) encode(file)} />
    </>
  )
}

const encode (file: File) => {
  const reader = new FileReader();
  reader.readAsDataURL(file); 

  reader.onload = () => console.log(reader.result); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."
}

コンソールに出力されます。

参考: https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL

間違った例

reader.result が null

const encode (file: File) => {
  const reader = new FileReader();
  reader.readAsDataURL(file); 
  console.log(reader.result); // エンコードした文字列が出て欲しいが null
}

encode() の reader.onload を省いてしまっています。
読み込み操作の終了をちゃんと待ちましょう。

already busy reading Blobs

タイトルです。
エンコードの処理の間違えた部分をループさせたり、debugger を使用すると起こります。

const encode (file: File) => {
  const reader = new FileReader();
  reader.readAsDataURL(file); 
  console.log(reader.result); // エンコードした文字列が出て欲しいが null
  
  debugger; // 確認しようとして debugger を入れる
  // 停止中に reader.readAsDataURL(file); をすると以下のエラーが出ます。
  // Uncaught InvalidStateError: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.
}

ループの場合はこんな記事ありました
https://stackoverflow.com/questions/24843508/filereader-error-the-object-is-already-busy-reading-blobs