input type="file"でSJISのファイルをアップロードしてFileReaderで取得する時は文字コードに気をつけよう

<input type="file">でSJISのファイルをアップロードする時

従来のMPAでは、

<form action="upload.php" method="POST">
  <input type="file" name="uploadFile" />
  <input type="submit" name="submit" value="送信する">
</form>

と書いて、
PHPやRubyなどサーバーサイドでアップロードファイルの中身を受け取るユースケースは多いと思います

今回はSPAの開発をしており、
Nuxt.js上でアップロードファイルをaxiosでAPIに送信しようとして、
SJISのファイルが文字化けしてしまうことに気付きました

↓下記の reader.readAsText(file, 'SJIS') のように第2引数に文字コードの指定をする必要があります

<template>
  <form action="upload.php" method="POST">
    <input type="file" name="uploadFile" @change="onUpload" />
    <input type="submit" name="submit" value="送信する">
  </form>
</template>

<script>
export default {
  name: 'Sample',
  methods: {
    onUpload(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.readAsText(file, 'SJIS') // SJISのファイルの場合は文字コードの指定が必要

      reader.onload = (e) => {
          // ...アップロードしたファイルの取得処理
          console.log(e.target.result)
      }
    },
  },
}
</script>