Vue.js CSVファイルを読み込み表示[FileReader]

2020年2月19日

Vue.jsにおいてFileReader APIを利用してCSVファイルを読み込み、画面に表示させてみます。

 

CSVファイルの内容と画面表示結果

 

 

CSV以外のファイルを読み込んだ場合、下記のようなメッセージが表示されます。

 

 

 

27行目

読み込んだファイルの情報を取得しています。これら情報から容量等を取得しファイルの検証をおこなうことができます。上記では単純にMIMEタイプのtext/csvでCSVファイルかどうかを判別(29〜32行目)しています。

 

34・35行目

FileReaderのインスタンスを作成しfileを読み込んでいます。CSVの場合はreadAsTextを利用し読み込みますが(他にも画像の場合はreadAsDataURLなど)、文字コードはデフォルトでUTF-8に設定されているので、Shift_JISの場合は下記のように第2引数に指定する必要があります。読み込み完了と同時にonloadが発動します(37行目)。

 

関連ページ

Laravel Vue.jsで画像をアップロード DB保存までの流れ

 

38〜43行目

改行でレコードを切り分け、なおかつレコード内のカンマで分割していきます。

 

44行目

最終的に二次元配列として格納されるので、それをテンプレート側(7〜9行目)で表示させています。

 

 

 

LINEで送る
Pocket

定番本
おすすめ本
定期本
 
Copyright © 2020 思考の葉 All Rights Reserved.  プライバシーポリシー