[JavaScript/TypeScript]base64形式の画像データをFile型に変換したい

はじめに

APIにリクエストする際、base64形式で来るデータをデコードする必要があり、調べていましたがいまいちしっくり来る情報がなく、先人様たちの記事を参考にbase64形式の画像データをFile型にデコードする方法を模索しました。
Node.js環境ではBufferを使用するのがベターらしかったのでBufferを用いて変換します。

base64形式をFile形式に変換する

画像データをbase64で受けとります。
まずはbase64形式のヘッダー部分のbase64:を取り除きます。

const fileData =base64Data.replace(/^data:\w+\/\w+;base64,/, '')

次にヘッダーを取り除きbase64のコードのみとなったデータをBuffer.fromを用いてBuffer型に変換します。
調べた限り、Buffer型への変換は現在Buffer.fromで実行するのが推奨されていそうです。

const decodedFile = Buffer.from(fileData, 'base64')

これでBuffer型となった画像ファイルを用意できました。

これにて必要な情報が全て揃ったため、new File()でFile型に変換します。

const file = new File([decodedFile], `fileName.jpg`, { type: 'image/jpeg' })

これにてFile型へのデコードが完了しました。

全てのコードをまとめるとこうなります。

const fileData =base64Data.replace(/^data:\w+\/\w+;base64,/, '')
const decodedFile = Buffer.from(fileData, 'base64')
const file = new File([decodedFile], 'fileName.jpg', { type: contentType })

まとめ

Buffer.fromを用いて変換している記事が少なく、File型への変換をしている記事も少なかったためまとめました。
今回の記事はこちらの記事を参考に作成させていただきました。
https://dev.classmethod.jp/articles/node-js-base64-encoded-image-to-s3/