ファイルをFileReader.readAsDataURLを使って文字列化したものは純粋なbase64文字列だと思っていたけど、decodeしようとしたら出来なくてなんでやねん！と思ったので残しておく。
まとめ
- 画像とかの添付ファイルをJavaScriptで扱うときにFileReaderを使う
- FileReader.readAsDataURLのresultで得られるのはData URIであって、純粋なbase64文字列じゃない
- 先頭のData URI宣言部を取り除いたら純粋なbase64文字列になる
大事なことは全部ドキュメントが教えてくれた
base64 decodeできなくて「おや？」と思ったけど、大事なことは全部ドキュメントに書いてあった。
メモ: blob の result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:/;base64, を削除しておく必要があります。
resultの文字列をprintしてみたら data:image/jpeg;base64,/9j/2wCEAAgGB... みたいな感じになっていて、たしかにbase64文字列じゃないや。っていうかよくよく考えればメソッド名が readAsDataURL だから、実行結果として得られるものは当然Data URIだよな... 😇
余計な文字列を取り除く
文字列化したものをWeb API等へ送るときは、先頭の余計な文字列を取り除いておこう。
実際に取り出した文字列をみるに data:${mimeType};base64,${base64EncodedFile} という構造になっていそうだけど、ドキュメントに 先に結果から data:*/*;base64, を削除しておく必要があります とあるのでとりあえずそれに従えば良さそう。
こんな感じ:
const dataURI = filereader.result; // "data:image/jpeg;base64,/9j/2wCEAAgGB..." みたいなのが入る const base64EncodedFile = dataURI.replace(/data:.*\/.*;base64,/, '');
