【備忘録】APIで受け取ったデータの日本語（パスのファイル名）が文字化けしていた

思い出せそうな気はするけれど、一応残しておく。

状態

Vue.js から rails のAPIを叩いてファイルパスデータを取得した。

取得したデータ

[
  {
    id: 1,
    role: 'estimate',
    filename: '/uploads/sheet/file/%E6%A1%88%E4%BB%B6%E5%A4%89%E6%95%B0%E3%81%AE%E5%A4%89%E6%8F%9B%E3%83%86%E3%82%B9%E3%83%88.xlsx'
  },
  {
    id: 2,
    role: 'estimate',
    filename: '/uploads/sheet/file/test-excel.xlsx'
  }
]

filenameが本当は「テストエクセル.xlsx」なのにAPIから返ってくる値は文字化している。
英語でファイル名を設定している方は正常に返ってくる。

対応

Vue template

<div v-for="hoge in hoges">
  <div class="filename>{{ hoge.id }}：{{ decodeURI(hoge.filename) }}</div>
</div>

decodeURI()を使用してエンコードされた文字列を表示

出力結果

１:/uploads/sheet/file/テストエクセル.xlsx
2:/uploads/sheet/file/test-excel.xlsx

参考

• http://www.openspc2.org/reibun/JavaScript_technique/sample/09_string/008/index.html
• http://js.studio-kingdom.com/javascript/global/decode_uri