如何设置图像格式以上传到 Firebase 存储（Ionic 3）答案

【问题标题】：How to set image format to upload to firebase storage (Ionic 3)如何设置图像格式以上传到 Firebase 存储（Ionic 3）
【发布时间】：2019-09-10 14:10:34
【问题描述】：

我正在使用 html 输入来选择一个图像和一个单独的按钮来上传：

<input class="file-upload-button" (change)="changedPhoto($event)" #inputcamera type="file" accept="image/*" capture="camera" />

<button ion-button color="primary" (click)="uploadPicture()">
   Upload
</button>

这是我设置 this.imageSource 并传递给提供者的打字稿：

  ionViewDidLoad() {
    const element = this.cameraInput.nativeElement as HTMLInputElement;
    element.onchange = () => {
      const reader = new FileReader();
      reader.onload = (r: any) => {
        //THIS IS THE ORIGINAL BASE64 STRING AS SNAPPED FROM THE CAMERA
        let base64 = r.target.result as string;
        //FIXING ORIENTATION USING NPM PLUGIN fix-orientation
        fixOrientation(base64, { image: true }, (fixed: string, image: any) => {
          //fixed IS THE NEW VERSION FOR DISPLAY PURPOSES
          this.img = fixed;
        });
      };
      reader.readAsDataURL(element.files[0]);
    };
  }

  changedPhoto(event) {
    this.imageSource = event.target.files[0];
  }

  uploadPicture() {
    this.publishedProvider.addPWAPicture(data.imageName, this.itemId, this.itemName, this.imageSource, this.userProfile.id).then(() => {
      this.imageName = '';
      this.imageSource = null;
  });

最后，我的提供者获取 this.imageSource 并上传到 Firebase 存储：

  addPWAPicture(imageName, ItemId, itemName, imageSource, uploaderId): firebase.Promise<any> {
    let TimeStamp = new Date();
    this.items.child('/ItemList').child(ItemId)
    .child('ImageList').push({
      imageName: imageName,
      timestamp: TimeStamp
    })
    .then((newImage) => {
      if (imageSource != null) {
        firebase.storage().ref('/itemPicture/').child(newImage.key)
        .child('imageSource.jpg').putString(imageSource, 'base64', {contentType: 'image/jpeg'})      
      }
    });
  }

我的问题：

使用cordova相机选择图像上传到firebase没有错误，但使用html输入，我可以正确预览图像，但在上传到firebase时，我收到以下错误。为什么它不喜欢 filereader 的输出？

ERROR Error: Uncaught (in promise): [object Object]

【问题讨论】：

标签： javascript image typescript firebase ionic-framework

【解决方案1】：

自己修复了这个问题 - 只需使用 .put() 而不是 .putString() 作为文件阅读器输出 blob，而不是 base64！

【讨论】：