vue.jsを用いてcsvファイルのアップロードを行いたいと考えています。
下記のようなプログラムを作成しました。
html
1 <!-- .container --> 2 <div class="container demo" style="margin-bottom: 20px;"> 3 <div class="row"> 4 <div class="page-header"> 5 <h1>データ入出力</h1> 6 </div> 7 </div> 8 9 <form class="form-inline" enctype="multipart/form-data" action="" name="form" method="post"> 10 11 <div class="f-left" style="margin-top: 10px; margin-bottom: 10px;"><h2>CSV取り込み</h2></div> 12 13 <table class="table table-search form-inline table-edit" style="margin-top: 10px; margin-bottom: 10px;"> 14 15 <tr> 16 <th width="20%">CSVとりこみ</th> 17 <td width="80%"> 18 19 <div class="input-group"> 20 <input type="file" id="file_input_expense" name="file_input_expense" @change="selectedFile" style="display: none;"> 21 <span class="input-group-btn"> 22 <button class="btn btn-default" type="button" onclick="$('#file_input_expense').click();"><i class="glyphicon glyphicon-folder-open"></i></button> 23 </span> 24 <div class="input-group"> 25 <input id="file_expense" type="text" class="form-control" placeholder="ファイルを選択してください" disabled> 26 </div> 27 </div> 28 29 </td> 30 31 </tr> 32 33 </table> 34 35 <ol> 36 <li v-for="todo in csv"> 37 {{ todo }} 38 </li> 39 </ol>
javascript
1 <script> 2 $(document).ready(function(){ 3 4 5 $(function(){ 6 $('#file_input_expense').change(function() { 7 $('#file_expense').val($(this).val()); 8 }); 9 }) 10 11 }); 12 13 14 const types = [ 15 'text/csv', 16 'text/comma-separated-values', 17 'text/plain', 18 'application/csv', 19 'application/excel', 20 'application/vnd.ms-excel', 21 'application/vnd.msexcel', 22 'text/anytext' 23 ]; 24 25 var vm = new Vue({ 26 el: '.demo', 27 data: { 28 i : '0', // 29 uploadFile: null, 30 csv:[], 31 }, 32 computed: { 33 }, 34 // `methods` オブジェクトの下にメソッドを定義する 35 methods: { 36 selectedFile: function(e) { 37 // 選択されたファイルの情報を取得 38 var fileData = e.target.files[0]; 39 40 var reader = new FileReader(); 41 // ファイル読み取りに失敗したとき 42 reader.onerror = function() { 43 alert('ファイル読み取りに失敗しました'); 44 return false; 45 } 46 47 if(!((types.includes(fileData.type)) && /.csv$/.test(fileData.name))) { 48 alert('csvファイルではありません。'); 49 return false; 50 } 51 // ファイル読み取りに成功したとき 52 reader.onload = function() { 53 54 var lines=reader.result.split("\r"); 55 56 var json_result = []; 57 58 var headers=lines[0].split(","); 59 60 for(var i=1;i<lines.length;i++){ 61 62 var obj = {}; 63 var currentline=lines[i].split(","); 64 65 for(var j=0;j<headers.length;j++){ 66 obj[j] = currentline[j]; 67 } 68 69 json_result.push(obj); 70 71 } 72 73 //return result; //JavaScript object 74 vm.csv = JSON.stringify(json_result); //JSON 75 76 } 77 78 // ファイル読み取りを実行 79 //reader.readAsText(fileData); 80 reader.readAsBinaryString(fileData); 81 }, 82 upload: function() { 83 //非同期 84 }, 85 86 87 }, 88 }); 89 90</script>
javascriptでcsvファイルをアップロードし、selectedFileのメソッドでvm.csvにjsonの情報を代入し、テンプレート側で画面描写しようとしています。
html
1 <li v-for="todo in csv"> 2 {{ todo }} 3 </li>
の部分でcsvファイルをアップロードし、jsonを作成したのですが、liのv-forの部分で一文字づづforが回ってしまい、csvファイルがうまく画面描写できません。
※下記のように出力されます一文字づづ。
1.[
2.{
3."
4.0
5."
6.:
7."
8.
9.n
どこか、根本的に考え方が間違えていたり、やり方が間違えているところがありますでしょうか。
申し訳ございませんが、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー