Nuxt JS를 사용하여 Firebase에 이미지를 성공적으로 업로드했습니다.

Question

<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:"", } } }, }

Answer 1

이미 언급했듯이 Firebase에 연결할 수 있습니다. 그런 다음 파일을 Firebase에 제출하려면 에서 다운로드해야 한다고 명시되어 있는 Documentation-1firebase.js导出的存储桶导入到index.js을 참조하세요. 이 단계를 완료한 후에는 업로드할 파일을 선택하기 위한 프런트엔드를 구축해야 합니다. Nuxt JS를 사용하여 Firebase에 파일을 업로드하는 단계별 프로세스를 명확하게 설명하는 위에 언급된 문서를 참조할 수 있습니다.

Nuxt JS를 사용하여 Firebase에 이미지를 제출하는 방법을 명확하게 설명하는 Documentation-2도 참조하세요.