【JS】base64エンコードされたファイルをPOST送信する際に気をつけること

JavaScriptでbase64エンコードしたファイルを、フォームからPOST送信する際にハマったところがあったのでメモ。

JavaScriptのFileReaderを使うことで、以下のようにファイルをbase64エンコードした文字列を取得することができる。

var reader = new FileReader;
reader.readAsDataURL(file);
reader.onload = function() {
  var val = reader.result;
}

この時、valには以下のような形式の値が入る。

data:image/jpeg;base64,/9j/4AAQSkZJR……

ちなみにこの値をそのままPHPファイルなどでデコードしようとすると、うまくファイルを展開できない。

なぜbase64文字列をデコードできないのか？

実は先ほどの値は純粋なbase64文字列ではなく、余計な情報が先頭に入っていたのだ。

その余計な情報というのがこちらの箇所。

data:image/jpeg;base64,

値をPOST送信する前にこちらの情報を削除し、純粋なbase64文字列に変換してから送信しなければならないのだ。

先ほどの「余計な情報」を含んだものはDataURIと呼ばれるもので、JavaScriptでbase64文字列へ変換するコードを紹介する。

var reader = new FileReader;
reader.readAsDataURL(file);
reader.onload = function() {
  var val = reader.result.replace(/data:.*\/.*;base64,/, '');
}

replaceメソッドを使用して、対象の箇所を空文字に変換している。

これでデータの受け取り側で正常にデコードすることができるようになる。