使用Nuxt JS将图片成功上传至Firebase
P粉885562567
P粉885562567 2023-08-31 20:43:16
[Vue.js讨论组]
<p>我正在开发一个从Firebase提交和检索数据的Web应用程序,我已经能够完全配置我的Nuxt JS应用程序与Firebase连接,但问题出现在当我想要提交混合图像文件和文本文件时。</p> <p>如何设置我的Nuxt JS项目以将图像和文本文件都提交到Firebase?</p> <p>这是我的表单模板。</p> <pre class="brush:php;toolbar:false;">Index.js. &lt;template&gt; &lt;div class=&quot;w-full max-w-lg p-6 m-auto mx-auto dark:bg-gray-800 font-body&quot;&gt; &lt;h1 class=&quot;text-3xl font-semibold text-center text-gray-700 dark:text-white&quot;&gt;创建帖子&lt;/h1&gt; &lt;form class=&quot;space-y-8&quot;&gt; &lt;div&gt; &lt;label for=&quot;username&quot; class=&quot;block text-sm text-gray-800 dark:text-gray-200&quot;&gt;标题&lt;/label&gt; &lt;input v-model =&quot;postDetails.title&quot; type=&quot;text&quot; class=&quot;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&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;&quot;&gt; &lt;label for=&quot;password&quot; class=&quot;block text-sm text-gray-800 dark:text-gray-200&quot;&gt;内容&lt;/label&gt; &lt;textarea v-model =&quot;postDetails.description&quot; type=&quot;textarea&quot; class=&quot;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&quot; &gt; &lt;/textarea&gt; &lt;/div&gt; &lt;div class=&quot;&quot;&gt; &lt;label for=&quot;password&quot; class=&quot;block text-sm text-gray-800 dark:text-gray-200&quot;&gt;标签&lt;/label&gt; &lt;select name=&quot;tags&quot; id=&quot;&quot; class=&quot;block w-full px-6 py-4 mt-2&quot;&gt; &lt;option v-for =&quot;obj in postDetails.tag&quot; :value=&quot;obj&quot; class=&quot;text-black text-lg py-5&quot;&gt;{{obj}}&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class=&quot;&quot;&gt; &lt;label for=&quot;password&quot; class=&quot;block text-sm text-gray-800 dark:text-gray-200&quot;&gt;特色图片&lt;/label&gt; &lt;input v-model =&quot;postDetails.featured_image&quot; type=&quot;text&quot; class=&quot;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&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;&quot;&gt; &lt;label for=&quot;password&quot; class=&quot;block text-sm text-gray-800 dark:text-gray-200&quot;&gt;创建于&lt;/label&gt; &lt;input v-model =&quot;postDetails.created_at&quot; type=&quot;text&quot; class=&quot;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&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;&quot;&gt; &lt;button class=&quot;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&quot;&gt; 发布 &lt;/button&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: &quot;dashboard&quot;, data(){ return{ postDetails:{ title:&quot;&quot;, content:&quot;&quot;, tag:[ &quot;商业&quot;, &quot;娱乐&quot;, &quot;新闻&quot;, &quot;科学&quot;, &quot;体育&quot;, &quot;技术&quot;, ], featured_image:&quot;&quot;, created_at:&quot;&quot;, } } }, } &lt;/script&gt;</pre></p>
P粉885562567
P粉885562567

全部回复(1)
P粉714890053

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号