将 Angular5 / Ionic3 中的本地图像上传到 Firebase 存储

Question

我可以通过这种方式轻松上传图片（选择输入文件）：

import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-root',
  template: '<div>'
      + '<input class="file-input" type="file" (change)="selFile($event.target.files)">'
      + '<button (click)="startUpload()">Upload</button>'
      + '</div>',
})

export class AppComponent {
  constructor(
    private storage: AngularFireStorage
  ) {}
  selectedFile: any;
  selFile(event: FileList) {
    this.selectedFile = event.item(0);
  }
  startUpload() {
    const file = this.selectedFile;
    const path = `test/${new Date().getTime()}_${file.name}`;
    this.task = this.storage.upload(path, file)
  }
}

这样，一切正常。

但我想上传一张使用@ionic-native/camera 拍摄的图片，如下所示：

import { AngularFireStorage } from 'angularfire2/storage';
import { Camera } from '@ionic-native/camera';

@Component({
  template: '<div>'
    + '<img src={{pathForImage(lastImage)}} style="width: 100%">'
    + '<button (click)="takePic()">Take Picture</button>'
    + '<button (click)="startUpload()">Upload</button>'
    + '</div>',
  })

export class AppComponent {
  constructor(
    private storage: AngularFireStorage,
    private camera: Camera,
  ) {}
  selectedFile: any;
  selFile(event: FileList) {
    this.selectedFile = event.item(0);
  }
  startUpload() {
    const file = this.selectedFile;
    const path = `test/${new Date().getTime()}_${file.name}`;
    this.task = this.storage.upload(path, file)
  }
  public takePic() {
    var options = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };
    this.camera.getPicture(options).then((imagePath) => {
      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
      this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
  }
  private copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
      this.lastImage = newFileName;
    });
  }
  public pathForImage(img) {
    if (img === null) {
      return '';
    } else {
      return cordova.file.dataDirectory + img;
    }
  }
}

所以，我可以将图像上传到 Firebase 存储。我可以用@ionic-native/camera 拍照。

但我不知道如何将使用相机拍摄的图像上传到 Firebase 存储。

如何像第一个示例一样上传 {{pathForImage(lastImage)}} 中的图像???

Answer 1

据我了解，您尝试使用它来选择手机内存中的文件：

<input type="file" (change)="selFile($event.target.files)">

或者这个来捕获文件

<input class="file-input" type="file" capture="camera" accept="image/*"(change)="selFile($event.target.files)">

所以，2 个输入有 change 事件让您获取要上传的文件。

当您使用Ionic 时，您必须包含此plugin file-transfer 并像这样上传您的图片：

public uploadImage() {
  // Destination URL
  var url = "http://yoururl/upload.php";

  // File for Upload
  var targetPath = this.pathForImage(this.lastImage);

  // File name only
  var filename = this.lastImage;

  var options = {
    fileKey: "file",
    fileName: filename,
    chunkedMode: false,
    mimeType: "multipart/form-data",
    params : {'fileName': filename}
  };

  const fileTransfer: TransferObject = this.transfer.create();

  this.loading = this.loadingCtrl.create({
    content: 'Uploading...',
  });
  this.loading.present();

  // Use the FileTransfer to upload the image
  fileTransfer.upload(targetPath, url, options).then(data => {
    this.loading.dismissAll()
    this.presentToast('Image succesful uploaded.');
  }, err => {
    this.loading.dismissAll()
    this.presentToast('Error while uploading file.');
  });
}