IONIC & FireBase Image Загрузить пример

У всех есть один

FireBase Realtime, облако огненная огня и хранение

Простая демонстрация загрузки файла в хранение Firebase из приложения Ionic Framework. Мы не загружаем строку Base64, мы загружаем BLOB в хранилище.

Хранение отличается от базы данных в реальном времени и новее FireBase Cloud Firestore.

FireBase предлагает два облачных, доступных клиента, доступные клиентские базы данных, которые поддерживают синхронизацию данных в реальном времени:

База данных в реальном времени Оригинальная база данных Firebase. Это эффективное решение для мобильных приложений для мобильных приложений, которые требуют синхронизации состояний в реальном времени.

Облако Firestore Новая флагманская база данных Firebase для разработки мобильного приложения. Он улучшает успехи базы данных Realtime с новой, более интуитивной моделью данных. Облако FireStore также имеет более богатые, быстрее запросы и масштабы лучше, чем база данных Realtime.

Выберите базу данных: облачный огневой или база данных в реальном времени | Firebase Если вам удобно с продуктом в бета-версии, используйте Cloud Firestore для ваших новых проектов. Облако Firestore предлагает … _firebase.google.com

Загрузить файл по книгам

Процесс для загрузки файла довольно проходит вперед и объясняется намного лучше в документации Firebase; Там нет волшебных вовлеченных.

Смотрите код:

Aaronksaunders/Ionic4-Firebase-Storage _File Загрузить из приложения Ionic V4 в хранилище облака Firebase – Aaronksaunders/Ionic4-firebase-storage_github.com

uploadToFirebase(_imageBlobInfo) {
    console.log("uploadToFirebase");
    return new Promise((resolve, reject) => {
      let fileRef = firebase.storage()
                        .ref("images/" + _imageBlobInfo.fileName);

let uploadTask = fileRef.put(_imageBlobInfo.imgBlob);

uploadTask.on(
        "state_changed",
        (_snap: any) => {
          console.log(
            "progess " +
              (_snap.bytesTransferred / _snap.totalBytes) * 100
          );
        },
        _error => {
          console.log(_error);
          reject(_error);
        },
        () => {
          // completion...
          resolve(uploadTask.snapshot);
        }
      );
    });
  }

Загрузить файлы в Интернете | Firebase _Note: Измените ваши правила безопасности FireBase для хранения облачного хранилища, чтобы обеспечить неавтоматический доступ. Поскольку Google по умолчанию … _firebase.google.com

Магия преобразования изображения из камеры в Blob для загрузки

Этот код камеры для использования плагина Ionic-Nature Camera скопирован непосредственно из Ионическая ночная документация

const options: CameraOptions = {
  quality: 80,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
};

let cameraInfo = await this.camera.getPicture(options);

Обязательно включите Cordova-файл плагин и Cordova-камера плагин Отказ File-Plugin имеет решающее значение для преобразования пути в файл правильно, чтобы он мог быть преобразован в BLOB для загрузки

// FILE STUFF
  makeFileIntoBlob(_imagePath) {
    // INSTALL PLUGIN - cordova plugin add cordova-plugin-file
    return new Promise((resolve, reject) => {
      let fileName = "";
      this.file
        .resolveLocalFilesystemUrl(_imagePath)
        .then(fileEntry => {
          let { name, nativeURL } = fileEntry;

// get the path..
          let path = nativeURL
                      .substring(0, nativeURL.lastIndexOf("/"));

fileName = name;

// we are provided the name, so now read the file 
          // into a buffer
          return this.file.readAsArrayBuffer(path, name);
        })
        .then(buffer => {
          // get the buffer and make a blob to be saved
          let imgBlob = new Blob([buffer], {
            type: "image/jpeg"
          });
          
          // pass back blob and the name of the file for saving
          // into fire base
          resolve({
            fileName,
            imgBlob
          });
        })
        .catch(e => reject(e));
    });
  }

Вещи, чтобы заметить в коде

Используйте бета-версии @ Ionic/родной Модули, и вам нужно убедиться, что вы используете путь « /NGX » при импорте библиотек.

"@ionic-native/camera": "^5.0.0-beta.15",
  "@ionic-native/core": "^5.0.0-beta.17",
  "@ionic-native/file": "5.0.0-beta.15",
  "@ionic-native/splash-screen": "5.0.0-beta.15",
  "@ionic-native/status-bar": "5.0.0-beta.15",

// notice the path for the import ends in ngx
import { Camera, CameraOptions } from "@ionic-native/camera/ngx";
import { File } from "@ionic-native/file/ngx";

Вы должны сделать то же самое, когда вы импортируете модуль в app.module.ts.

import { Camera } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    File,
    Camera,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Полный исходный код к примеру:

https://github.com/aaronksaunders/ionic4-firebase-storage