Como enviar uma imagem para o Firebase a partir de um aplicativo Ionic 4?

Neeraj Dana Segue 24 de junho · 5 min ler

Como um todo, percebemos que o Firebase funciona admiravelmente em relação a bancos de dados em tempo real. De qualquer forma, você percebeu que o Firebase também é extraordinário para transferir informações e registros para o Firebase Storage privado de seu aplicativo?

Neste exercício de instrução do Ionic 4 Framework, eu lhe direi a melhor maneira de transferir uma imagem de um aplicativo iônico para o Firebase Storage.

Como todos sabemos, isso é sempre útil para qualquer aplicação, pois nós carregamos a imagem do perfil da maneira mais sábia, como funciona a imagem de upload e todas as coisas que precisamos saber? Vamos ver tudo isso neste tutorial e vamos explicar tudo em detalhes …

Portanto, para conectar o firebase ao projeto iônico, precisamos criar um projeto firebase

1) Vá para https://console.firebase.google.com/u/0/

Seu console será algo parecido com isto

2) Clique em criar um botão de projeto e fazer um projeto assim que você fizer um projeto, você será redirecionado para a página do painel do seu projeto

3) Agora clique no ícone </> para fazer o projeto web Agora dê um nome ao aplicativo e clique no botão registrar. Você obterá a configuração sdk do firebase agora copie o conteúdo da tag de script iniciada em firebaseConfig = {} e mantenha em algum lugar seguro.

4) Agora clique em continuar para o botão do console.

5) Você criou com sucesso seu projeto firebase.

6) Agora crie o projeto iônico com o comando

 início iônico <NAME-OF-YOUR-APPLICATION> --blank 

7) O comando acima irá criar o projeto iônico para você.

8) Como seu projeto é criado, abra-o no editor. Eu usarei o vscode.

9) Agora, a primeira coisa que precisamos fazer é colar a configuração que salvamos em algum lugar em environment.ts em src / environment / environment.ts

 exportar ambiente const = {produção: false, firebase: {apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", databaseURL: "YOUR_DATABASE_URL", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID"}} 

10) Agora instale o fogo angular para usar o firebase no projeto iônico usando npm.

 npm instalar firebase angularfire2 --save 

11) Agora, no seu app.module.ts, vamos importar módulos do Firebase angular,

12) Agora no seu componente home.html vamos adicionar o botão e pré-visualizar o arquivo

 <ion-header> <ion-toolbar> <ion-title> Visualização de Imagem </ ion-title> </ ion-toolbar> </ ion-header> <preenchimento de conteúdo iônico> <div class = "box"> < div class = "preview"> <img [src] = "url" alt = ""> </ div> <div class = "uploadbtn"> <label> <tipo de input (change) = "uploadImage ($ event)" = "arquivo" class = "upload de imagem" accept = "image / *"> </ label> </ div> </ div> </ ion-content> 

Agora vamos adicionar alguns css

 .box {display: bloco; min-width: 300px; margem: 10px; cor de fundo: branco; raio de fronteira: 5 px; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,12), 0 1px 2px rgba (0, 0, 0, 0,24); Transição: todos os 0.3s cúbico-bezier (0.25, 0.8, 0.25, 1); estouro: oculto; & .preview {largura: 100%; posição: relativa; estouro: oculto; texto-alinhar: centro; cor de fundo: branco; posição de fundo: centro central; repetição de fundo: sem repetição; tamanho do plano de fundo: capa; } & .uploadbtn {position: relative; altura: 75 px; cor de fundo: rgb (125, 95, 160); cursor: ponteiro; estouro: oculto; texto-alinhar: centro; transição: 150ms de facilidade de entrada em cores de fundo; & label {display: flex; itens de alinhamento: centro; largura: 100%; altura: 100%; font-weight: 400; transbordamento de texto: reticências; espaço branco: nowrap; cursor: ponteiro; estouro: oculto; & input {width: 0.1px; altura: 0,1px; opacidade: 0; estouro: oculto; posição: absoluta; z-index: -1; } & :: depois de {content: 'add'; font-family: 'Ícones materiais'; posição: absoluta; altura da linha: 2; tamanho da fonte: 2.5rem; color: # e6e6e6; topo: calc (50% - 2,5rem); esquerda: calc (50% - 1,25rem); z-index: 0; }}}} 

14) Agora vamos fazer a função uploadImage ($ event) em home.page.ts

 import {Component} de '@ angular / core'; import {AngularFirestore} de '@ angular / fire / firestore'; import {AngularFireStorage} de '@ angular / fire / storage'; interface de exportação Image {id: string; imagem: string; } @Component ({seletor: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'],}) classe de exportação HomePage {url: any; newImage: Image = {id: this.afs.createId (), imagem: ''} carregando: boolean = false ;; construtor (afs privados: AngularFirestore, armazenamento privado: AngularFireStorage) {} uploadImage (event) {this.loading = true; if (event.target.files && event.target.files [0]) {var leitor = novo FileReader (); reader.readAsDataURL (event.target.files [0]); // Para a visualização da imagem reader.onload = (e: any) => {// chamado once readAsDataURL é completado this.url = e.target.result; // Para fazer upload de imagens para o Firebase const fileraw = event.target.files [0]; console.log (fileraw) const filePath = '/ Imagem /' + this.newImage.id + '/' + 'Image' + (Math.floor (1000 + Math.random () * 9000) + 1); const result = this.SaveImageRef (filePath, fileraw); const ref = result.ref; result.task.then (a => {ref.getDownloadURL (). subscribe (a => {console.log (a); this.newImage.image = a; this.loading = falso;}); this.afs. coleção ('Imagem'). doc (this.newImage.id) .set (this.newImage);}); }, erro => {alerta ("Erro"); }}} SaveImageRef (filePath, arquivo) {return {task: this.storage.upload (filePath, arquivo), ref: this.storage.ref (filePath)}; }} 

No arquivo ts acima, criamos uma interface de como todas as coisas serão salvas com a imagem, de modo que estamos apenas salvando a imagem com id, para que a interface se pareça com algo assim.

 interface de exportação Image {id: string; imagem: string; } 

Depois disso, importamos ( angularfirestore ) e ( angularfirstorage ) para armazenar imagens.

Na função de upload primeiro com a ajuda do filereader, estamos obtendo o conteúdo do arquivo através da função reader que é readDataAsURL com a qual visualizamos a imagem.

Depois disso, estamos obtendo o arquivo e fazendo o caminho do arquivo onde a imagem será armazenada para que possamos obter facilmente a imagem do banco de dados.

Agora fizemos mais uma função save saveImageRef, a qual salvamos a imagem no firebase storage e retornamos a referência onde o arquivo é armazenado e o downloadUrl do arquivo, para que você possa facilmente passar o downloadUrl para o banco de dados.

Então é assim que a nossa aplicação se parece

Isso é tudo, terminamos o upload da imagem para o banco de dados firebase.