URL.createObjectURL()とFileReader.readAsDataURL()

似たユースケースで使う以下の2つ

いつ使う？

例えば、画像をBrowser上にuploadして、previewを表示する時などに使う

code:ts

const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {

e.preventDefault();

const files = Array.from(e.dataTransfer.files);

if (file == null) return;

const url = URL.createObjectURL(file);

setImageSrc(url);

}, []);

code:ts

const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {

e.preventDefault();

const files = Array.from(e.dataTransfer.files);

if (file == null) return;

const reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = () => {

setImageSrc(reader.result as string);

};

}, []);

この2つの使い分け

画像ファイルの一時的なURLを生成する

メモリ使用量が少ない

同期的に処理される

画像を実際にアップロードする際に、このURLをserverに送ったりすることはない

browser内部でのみ使用するURL

画像ファイルのデータを文字列として読み込む

メモリ使用量が大きい

非同期的に処理される

ここで生成したURIはそのままserverに送信できる

ChatGPT

つまり、どちらを使用するかは、画像を表示するだけであれば URL.createObjectURL() を使用し、ファイルの内容を処理する必要がある場合には FileReader.readAsDataURL() を使用することをおすすめします。

例えば、react-hook-formで値を保持する場合に、

createObjectURLを使う場合は、URLと実体(File)の両方を持っている必要がある

それなら最初からBlobを持ってれば楽