Successfully upload images to Firebase using Nuxt JS

Question

I am developing a web application that submits and retrieves data from Firebase, I have been able to fully configure my Nuxt JS application to connect with Firebase, but the problem arises when I want to submit mixed image files and text files .

How do I set up my Nuxt JS project to submit both images and text files to Firebase?

This is my form template.

Index.js.

<template>

    <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">Create post</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" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark: 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" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark: 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 rounded-lg dark: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">创建于</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 rounded-lg dark: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="">
                <button class="w-full py-4 px-6 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
                   发布
                </button>
            </div>
        </form>
    
   
    </div>
    
    </template>
    
    <script>
    
export default {
name: "dashboard",

data(){

    return{

    postDetails:{
        
        title:"",
        content:"",
        tag:[
            
            "商业",
            "娱乐",
            "新闻",
            "科学",
            "体育",
            "技术",
            ],
        featured_image:"",
        created_at:"",
     
    }


    }
},


    }
    </script>

Answer 1

As you already mentioned, you are able to connect to Firebase. Then, to submit the file to Firebase, you can refer to this documentation-1 which states that you need to import the bucket exported from firebase.js into index.js middle. After completing this step, you need to build the frontend to select files to upload. You can refer to the above mentioned documentation which clearly describes the step-by-step process of uploading files to Firebase using Nuxt JS.

You can also refer to this Document-2 which clearly explains how to submit images to Firebase using Nuxt JS.