Firebase URL 가져오기

Firebase는 다양한 서비스를 제공하는 BAAS(Backend as a Service)입니다. 서비스에는 인증, 클라우드 스토리지, 호이스팅 등이 포함됩니다. 기본적으로 개발자는 인증, 데이터베이스 등을 모바일이나 웹 애플리케이션에 쉽게 통합할 수 있습니다.

이 튜토리얼에서는 Firebase의 클라우드 저장소를 살펴보겠습니다. Firebase Cloud Storage에 이미지를 업로드하고 어디에서나 사용할 수 있도록 이미지의 URL을 가져오는 방법을 알아봅니다.

사용자는 아래 단계에 따라 Firebase 계정을 설정하고 이를 단일 페이지 웹 애플리케이션과 통합해야 합니다.

• 1단계 - 먼저 Firebase 웹사이트에 접속하여 계정을 만드세요.

• 2단계 - 이제 https://console.firebase.google.com/u/0/으로 이동하여 Firebase 콘솔을 엽니다.

• 3단계 - 이제 "프로젝트 만들기" 버튼을 클릭하여 새 프로젝트 만들기를 시작하세요.

• 4단계 - 여기에 프로젝트 이름을 추가하고 이용 약관에 동의한 후 "계속" 버튼을 클릭하세요.

• 5단계 - 원하는 위치를 선택하고 이용 약관에 동의한 후 "프로젝트 만들기" 버튼을 클릭하세요.

• 6단계 - 다음 페이지로 리디렉션됩니다. 여기에서 '저장소' 카드 요소를 클릭하세요. 그런 다음 "시작"버튼을 클릭하십시오.

• 7단계 - 여기에서 테스트 또는 프로덕션 모드로 실행하도록 선택합니다. 여기에서는 테스트할 "테스트" 모드를 선택하고 "다음" 버튼을 클릭합니다.

• 8단계 - 이제 가장 가까운 선호하는 저장 위치를 ​​선택하고 "완료" 버튼을 클릭하세요. 기본 버킷 생성이 시작됩니다.

• 9단계 - 버킷을 생성하면 다음 페이지로 리디렉션됩니다. 예시에서 사용할 버킷 ID를 여기에서 복사하세요.

• 10단계 - 이제 규칙 탭으로 이동하여 규칙을 편집하세요. 그 후 모든 사용자가 인증 없이 이미지 파일을 업로드할 수 있도록 다음 코드를 추가합니다.

이제 버킷에서 이미지를 업로드하기 위한 Firebase 프로젝트 설정이 완료되었습니다.

예

아래 예제에서는 사용자가 이미지 파일을 업로드할 때 uploadFile() 함수를 호출합니다. uploadFile() 함수에서는 이미지 파일을 Firebase 저장소에 업로드하고 이미지 URL을 가져온 다음 해당 URL을 사용하여 이미지의 "src" 속성 값을 변경합니다.

사용자는 주어진 예에 따라 다음 단계를 따라야 합니다.

• 1단계 - 단일 페이지 웹사이트에서 Firebase를 사용하려면

  태그에 Firebase CDN을 추가하세요.

• 2단계 - HTML에 진행률 표시줄을 추가하면 이미지 업로드 비율에 따라 JavaScript에서 진행률이 업데이트됩니다. 또한 파일을 업로드하기 위한 입력을 추가합니다. 이는 사용자가 파일을 업로드할 때 uplaodFile() 함수를 호출해야 합니다. 또한, "src" 값이 비어 있는 "img" 요소를 추가하면 다운로드 URL을 가져온 후 "src" 값을 초기화합니다.

• 3단계 - JavaScript에서는 사용자가 파일을 업로드할 때 파일에 액세스하고 Date() 개체를 사용하여 고유한 파일 이름을 "fileName" 변수에 저장합니다.

• 4단계 - 이제 Firebase Storage를 초기화합니다.

• 5단계 - 이제 버킷의 원하는 위치에 이미지 파일 업로드를 시작하고 업로드된 비율을 기준으로 진행률 값을 업로드합니다.

• 6단계 - 업로드가 완료되면 getDownalodURL() 메소드를 사용하여 이미지 URL을 가져오고 이를 웹페이지에 표시할 이미지의 "src" 속성 값으로 설정합니다.

출력에서 사용자는 업로드된 이미지가 표시되는 것을 확인할 수 있습니다.

사용자는 JavaScript를 사용하여 Firebase Cloud Storage에 이미지를 업로드하고 이미지 URL을 얻는 방법을 배웠습니다. 실시간 애플리케이션에서는 Firebase 사용 시 사용자의 프로필 사진 및 기타 이미지에 업로드된 이미지의 URL을 알아내는 것이 유용합니다.

또한 개발자는 Firebase를 사용하여 이미지 업로드 및 URL 가져오기에 대한 매우 빠른 설정을 지정할 수 있습니다.

위 내용은 Firebase URL 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!