Téléchargez avec succès des images sur Firebase à l'aide de Nuxt JS
P粉885562567
P粉885562567 2023-08-31 20:43:16
0
1
525
<p>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. </p> <p>Comment configurer mon projet Nuxt JS pour soumettre à la fois des images et des fichiers texte à Firebase ? </p> <p> Ceci est mon modèle de formulaire. </p> <pre class="brush:php;toolbar:false;">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></pre></p>
P粉885562567
P粉885562567

répondre à tous(1)
P粉714890053

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal