Laden Sie Bilder mit Nuxt JS erfolgreich auf Firebase hoch

Question

Ich entwickle eine Webanwendung, die Daten von Firebase übermittelt und abruft. Ich konnte meine Nuxt JS-Anwendung vollständig für die Verbindung mit Firebase konfigurieren, aber das Problem tritt auf, wenn ich gemischte Bilddateien und Textdateien übermitteln möchte.

Wie richte ich mein Nuxt JS-Projekt ein, um sowohl Bilder als auch Textdateien an Firebase zu senden?

Dies ist meine Formularvorlage.

Index.js.

<Vorlage>

    <div class="w-full max-w-lg p-6 m-auto mx-auto dark:bg-gray-800 font-body">
        <h1 class="text-3xl font-semibold text-center text-gray-700 dark:text-white">Beitrag erstellen</h1>
    
        <form class="space-y-8">
            <div>
                <label for="username" class="block text-sm text-gray-800 dark:text-gray-200">title</label>
                <input v-model ="postDetails.title" type="text" block w-full px-6 py-4 mt-2 text-gray-700 bg-white border abgerundet-lg dunkel: bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
            </div>
    
            <div class="">
           
                <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">content</label>
                <textarea v-model ="postDetails.description" type="textarea" bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" </textarea>
            </div>

            <div class="">
           
           <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">label</label>

           <select name="tags" id="" class="block w-full px-6 py-4 mt-2>
            <option v-for ="obj in postDetails.tag" :value="obj" class="text-black text-lg py-5">{{obj}}</option>
           
        </select>

       </div>

       <div class="">
           
           <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">特色图片</label>
           <input v-model ="postDetails.featured_image" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border abgerundet-lg dunkel:bg-gray-800 dunkel:text-gray-300 dunkel:grenzgrau-600 focus:border-blue-400 dunkel:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
       </div>

       <div class="">
           
           <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">创建于</label>
           <input v-model ="postDetails.created_at" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border abgerundet-lg dunkel:bg-gray-800 dunkel:text-gray-300 dunkel:grenzgrau-600 focus:border-blue-400 dunkel:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
       </div>



    
            <div class="">
                <button class="w-full py-4 px-6 text-sm Schriftart-Medium Tracking-Wide Text-Weiß Großschreibung Übergangsfarben Dauer-300 Transformation bg-gray-800 abgerundet Hover:bg-gray-700 Fokus :outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
                   发布
                </button>
            </div>
        </form>
    
   
    </div>
    
    </template>
    
    <script>
    
Standard exportieren {
Name: "Dashboard",

Daten(){

    zurückkehren{

    Beitragsdetails:{
        
        Titel:"",
        Inhalt:"",
        Etikett:[
            
            „商业“,
            „娱乐“,
            „新闻“,
            „科学“,
            „体育“,
            „技术“,
            ],
        feature_image:"",
        erstellt_at:"",
     
    }


    }
},


    }
    </script>

Answer 1

正如您已经提到的，您能够连接到Firebase。然后，要将文件提交到Firebase，您可以参考此文档-1，其中指出您需要将从firebase.js导出的存储桶导入到index.js中。完成此步骤后，您需要构建前端以选择要上传的文件。您可以参考上述提到的文档，其中清楚地描述了使用Nuxt JS将文件上传到Firebase的逐步过程。

还可以参考此文档-2，其中清楚地解释了如何使用Nuxt JS将图像提交到Firebase。