質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

解決済

2回答

338閲覧

vue-router JSON 読込み

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2019/02/01 05:06

編集2019/02/01 05:40

前提・実現したいこと

似たようなご質問ですいません。現在vue-routerで遷移したvueファイル内で
inputタグからファイルをアップロードし、console.logにて表示できるようにしたいです。

発生している問題・エラーメッセージ

console.log(json)で中身を確認できません。

Uncaught ReferenceError: Json is not defined at FileReader.reader.onload

該当のソースコード

vue

1<template> 2 <v-layout justify-center align-center column > 3 <input type="file" @change="onFileChange"> 4 </v-layout> 5</template> 6 7<script> 8export default { 9 methods: { 10 onFileChange:function(e){ 11 var file = e.target.files[0] 12 console.log(file); 13 if(file){ 14 var reader = new FileReader() 15 reader.onload = function(e){ 16 json = Json.parse(e.target.result); 17 console.log(json) 18 } 19 reader.readAsText(file) 20 } 21 } 22 } 23} 24</script> 25<style> 26</style>

使用したjson

json

1[ 2 {"title":"A","body":"a"}, 3 {"title":"B","body":"b"}, 4 {"title":"C","body":"c"} 5] 6

試したこと

console.logでファイル自体は取得できているようです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rururu3

2019/02/01 05:34

addEventListener・・・がそのソース内では存在しないので、違うところのソースで発生してませんか?
退会済みユーザー

退会済みユーザー

2019/02/01 05:35

すいません。 色々試していて、違うエラーコードを貼ってしまいました。 修正致します。
guest

回答2

0

エラー表示の再現はしなかったけどとりあえず
reader.readAsTextreader.readAsText(file);かと

投稿2019/02/01 05:18

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/02/01 05:19

失礼しました。 修正致します。
guest

0

ベストアンサー

JsonではなくJSONですね

投稿2019/02/01 05:44

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/02/01 05:53

なんと初歩的なミスを、、、、 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問