Téléchargez avec succès des images sur Firebase à l'aide de Nuxt JS

Question

Je développe une application Web qui soumet et récupère des données de Firebase, j'ai pu configurer entièrement mon application Nuxt JS pour se connecter à Firebase, mais le problème survient lorsque je souhaite soumettre des fichiers image et des fichiers texte mixtes.

Comment configurer mon projet Nuxt JS pour soumettre à la fois des images et des fichiers texte à Firebase ?

Ceci est mon modèle de formulaire.

Index.js.

<modèle>

    <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">Créer un message</h1>
    
        <form class="espace-y-8">
            <div>
                <label for="nom d'utilisateur" 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 arrondi-lg sombre : bg-gray-800 foncé: texte-gris-300 foncé: bordure-gris-600 focus: bordure-bleu-400 foncé: focus: bordure-bleu-300 focus: anneau-bleu-300 focus: contour-aucun focus: anneau focus:anneau-opacité-40" />
            </div>
    
            <classe div="">
           
                <label for="mot de passe" class="block text-sm text-gray-800 dark:text-gray-200">content</label>
                <textarea v-model ="postDetails.description" type="textarea" class="bloc w-full px-6 py-4 mt-2 text-gray-700 bg-white border arrondi-lg foncé : bg-gray-800 foncé: texte-gris-300 foncé: bordure-gris-600 focus: bordure-bleu-400 foncé: focus: bordure-bleu-300 focus: anneau-bleu-300 focus: contour-aucun focus: anneau focus:anneau-opacité-40"
            </div>

            <classe div="">
           
           <label for="mot de passe" class="block text-sm text-gray-800 dark:text-gray-200">label</label>

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

       </div>

       <classe div="">
           
           <label for="mot de passe" class="block text-sm text-gray-800 dark:text-gray-200">特色图片</label>
           <input v-model ="postDetails.featured_image" type="texte" class = "bloc w-full px-6 py-4 mt-2 texte-gris-700 bg-blanc bordure arrondie-lg foncé : bg-gray-800 foncé : texte-gris-300 foncé : bordure-gris-600 focus: border-blue-400 dark: focus: border-blue-300 focus: ring-blue-300 focus: contour-aucun focus: ring focus: ring-opacity-40" />
       </div>

       <classe div="">
           
           <label for="mot de passe" class="block text-sm text-gray-800 dark:text-gray-200">创建于</label>
           <input v-model ="postDetails.created_at" type="texte" class = "bloc w-full px-6 py-4 mt-2 texte-gris-700 bg-blanc bordure arrondie-lg foncé : bg-gray-800 foncé : texte-gris-300 foncé : bordure-gris-600 focus: border-blue-400 dark: focus: border-blue-300 focus: ring-blue-300 focus: contour-aucun focus: ring focus: ring-opacity-40" />
       </div>



    
            <classe div="">
                <button class = "w-full py-4 px-6 text-sm font-medium tracking-wide text-white majuscule transition-colors durée-300 transformation bg-gray-800 arrondi survol : bg-gray-700 focus : contour-aucun focus: focus en anneau: focus en anneau-gris-300: focus en anneau-opacité-50">
                   发布
                </bouton>
            </div>
        </formulaire>
    
   
    </div>
    
    </modèle>
    
    <script>
    
exporter par défaut {
nom : "tableau de bord",

données(){

    retourner{

    postDétails : {
        
        titre :"",
        contenu :" »,
        étiqueter:[
            
            "商业",
            "娱乐",
            "新闻",
            "科学",
            "体育",
            "技术",
            ],
        image_présentée :"",
        créé_à :"",
     
    }


    }
},


    }
    </script>

Answer 1

Comme vous l'avez déjà mentionné, vous pouvez vous connecter à Firebase. Ensuite, pour soumettre le fichier à Firebase, vous pouvez vous référer à cette Documentation-1 qui indique que vous devez extraire le fichier de firebase.js导出的存储桶导入到index.js. Après avoir terminé cette étape, vous devez créer le frontend pour sélectionner les fichiers à télécharger. Vous pouvez vous référer à la documentation mentionnée ci-dessus qui décrit clairement le processus étape par étape de téléchargement de fichiers sur Firebase à l'aide de Nuxt JS.

Référez-vous également à cette Documentation-2 qui explique clairement comment soumettre des images à Firebase à l'aide de Nuxt JS.