Vue.jsにおいてFileReader APIを利用してCSVファイルを読み込み、画面に表示させてみます。
CSVファイルの内容と画面表示結果
|
1 2 3 4 5 6 |
id,name,age 1,太郎,22 2,花子,33 3,次郎,44 4,夕子,55 5,一郎,66 |
CSV以外のファイルを読み込んだ場合、下記のようなメッセージが表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<template> <div> <input type="file" @change="loadCsvFile" /> <p>{{ message }}</p> <table border="1"> <tr v-for="(worker, index) in workers" :key="index"> <td v-for="(column, index) in worker" :key="index">{{ column }}</td> </tr> </table> </div> </template> <script> export default { data() { return { message: "", workers: [] }; }, methods: { loadCsvFile(e) { let vm = this; vm.workers = []; vm.message = ""; let file = e.target.files[0]; if (!file.type.match("text/csv")) { vm.message = "CSVファイルを選択してください"; return; } let reader = new FileReader(); reader.readAsText(file); reader.onload = () => { let lines = reader.result.split("\n"); lines.shift(); let linesArr = []; for (let i = 0; i < lines.length; i++) { linesArr[i] = lines[i].split(","); } vm.workers = linesArr; }; } } }; </script> |
27行目
読み込んだファイルの情報を取得しています。これら情報から容量等を取得しファイルの検証をおこなうことができます。上記では単純にMIMEタイプのtext/csvでCSVファイルかどうかを判別（29〜32行目）しています。
34・35行目
FileReaderのインスタンスを作成しfileを読み込んでいます。CSVの場合はreadAsTextを利用し読み込みますが（他にも画像の場合はreadAsDataURLなど）、文字コードはデフォルトでUTF-8に設定されているので、Shift_JISの場合は下記のように第2引数に指定する必要があります。読み込み完了と同時にonloadが発動します（37行目）。
|
1 |
reader.readAsText(file, "Shift_JIS"); |
関連ページ
Laravel Vue.jsで画像をアップロード DB保存までの流れ
38〜43行目
改行でレコードを切り分け、なおかつレコード内のカンマで分割していきます。
44行目
最終的に二次元配列として格納されるので、それをテンプレート側（7〜9行目）で表示させています。
