Nuxt JS를 사용하여 Firebase에 이미지를 성공적으로 업로드했습니다.
<p>Firebase에서 데이터를 제출하고 검색하는 웹 애플리케이션을 개발 중입니다. Nuxt JS 애플리케이션을 Firebase와 연결하도록 완전히 구성할 수 있었지만 혼합 이미지 파일과 텍스트 파일을 제출하려고 하면 문제가 발생합니다. </p>
<p>이미지와 텍스트 파일을 모두 Firebase에 제출하도록 Nuxt JS 프로젝트를 설정하려면 어떻게 해야 하나요? </p>
<p>이것은 내 양식 템플릿입니다. </p>
<pre class="brush:php;toolbar:false;">Index.js.
<템플릿>
<div class="w-full max-w-lg p-6 m-auto mx-auto dark:bg-gray-800 글꼴-본문>
<h1 class="text-3xlfont-semibold text-center text-gray-700 dark:text-white">게시물 만들기</h1>
<form class="space-y-8">
<div>
<label for="사용자 이름" class="text-sm text-gray-800 dark:text-gray-200">제목</label>
<input v-model ="postDetails.title" type="text" class="w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark: bg-gray-800 다크:텍스트-회색-300 다크:border-gray-600 포커스:border-blue-400 다크:포커스:border-blue-300 포커스:ring-blue-300 포커스:개요-없음 포커스:링 초점:링 불투명도-40>
</div>
<div 클래스="">
<label for="password" class="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 다크:텍스트-회색-300 다크:border-gray-600 포커스:border-blue-400 다크:포커스:border-blue-300 포커스:ring-blue-300 포커스:개요-없음 포커스:링 초점:링-불투명도-40>
</div>
<div 클래스="">
<label for="password" class="text-sm text-gray-800 dark:text-gray-200">label</label>
<이름 선택="태그"id=""클래스="w-full px-6 py-4 mt-2">
<option v-for ="postDetails.tag의 obj" :value="obj" class="text-black text-lg py-5">{{obj}}</option>
</선택>
</div>
<div 클래스="">
<label for="비밀번호" class="block text-sm text-gray-800 dark:text-gray-200">특색 그림</label>
<input v-model = "postDetails.featured_image" 유형="텍스트" class="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 차단 초점:border-blue-400 dark:focus:border-blue-300 초점:ring-blue-300 초점:outline-none 초점:ring 초점:ring-opacity-40" />
</div>
<div 클래스="">
<label for="비밀번호" class="block text-sm text-gray-800 dark:text-gray-200">创建于</label>
<input v-model = "postDetails.created_at" 유형="텍스트" class="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 차단 초점:border-blue-400 dark:focus:border-blue-300 초점:ring-blue-300 초점:outline-none 초점:ring 초점:ring-opacity-40" />
</div>
<div 클래스="">
<버튼 클래스="w-full py-4 px-6 text-sm 글꼴-중간 추적-와이드 텍스트-흰색 대문자 전환 색상 지속 시간-300 변환 bg-gray-800 둥근 hover:bg-gray-700 초점 :개요-없음 초점:링 초점:ring-gray-300 초점:ring-opacity-50">
发布
</버튼>
</div>
</양식>
</div>
</템플릿>
<스크립트>
기본값 내보내기 {
이름: "대시보드",
데이터(){
반품{
게시물 세부정보:{
제목:"",
내용:"",
꼬리표:[
"商业",
"娱乐",
"새로운",
"이학",
"체육",
"技术",
],
추천_이미지:"",
생성_at:"",
}
}
},
}
