前提・実現したいこと
nuxtフレームワークで、firebaseのstorageにファイルをアップロードするページを作ろうとしています。
↓のインターフェイスでアップロードボタンをクリックすると、firebaseのstorageにファイルがアップロードされる想定です。
発生している問題・エラーメッセージ
アップロードボタンをクリックしても、firebaseのstorageにファイルがアップロードされません。
とくにエラーメッセージが出てきたりはしていません。
下記にソースコードや検証内容を記載いたしますので、原因のご見当がつかれる方はご教示お願いいたします。
該当のソースコード
<template> <div class="container"> <form id="form1"> <input type="file" id="input1"> <button id="button1" @click="upload()">アップロード</button> </form> </div> </template> <script> import firebase from "@/plugins/firebase" export default { methods:{ upload(){ //変数fileに、inputタグで選択されたファイルを格納 var file = document.getElementById("input1").files //fileの中身を確かめてみる console.log(file); //firebaseのstorageにアップロード firebase.storage().ref("test").put(file[0]) .then(snapshot => { //アップロードが成功すると、コンソールにsuccessと表示される console.log("success"); }) } } } </script>
試したこと
(1)inputタグをかこっているformタグを外してみたところ、アップロードに成功
下記のソースコードでアップロードを試みたところ、アップロードに成功しました。
<template> <div class="container"> <!-- ↓ここが違うところです。formタグを外しました。--> <input type="file" id="input1"> <button id="button1" @click="upload()">アップロード</button> </div> </template> <script> import firebase from "@/plugins/firebase" export default { methods:{ upload(){ //変数fileに、inputタグで選択されたファイルを格納 var file = document.getElementById("input1").files //fileの中身を確かめてみる console.log(file); //firebaseのstorageにアップロード firebase.storage().ref("test").put(file[0]) .then(snapshot => { //アップロードが成功すると、コンソールにsuccessと表示される console.log("success"); }) } } } </script>
(2)(1)のソースコード(=成功したソースコード)で取得したファイルオブジェクトと、最初のソースコード(=失敗したソースコード)で取得したファイルオブジェクトを比較。
(1)のソースコードにも、最初のソースコードにも書いておりますが
console.log(file)
で、inputタグから取得したファイルオブジェクトをコンソール出力し、その中身を比較してみました。
(1)のソースコードの場合は↓のスクショのような結果が得られました。
(2)一方で、最初のソースコードの場合は↓のスクショのような結果が得られました。(1)のソースコードの出力結果とは違い、展開しても中身がありません。
あなたの回答
tips
プレビュー