从 PhotoLibrary 中挑选图像不起作用 - Ionic 4答案

【问题标题】：Picking images from PhotoLibrary not working - Ionic 4从 PhotoLibrary 中挑选图像不起作用 - Ionic 4
【发布时间】：2019-01-19 21:05:43
【问题描述】：

我正在为我正在使用 Ionic 4 开发的应用程序实现图片上传功能。我正在使用本机插件相机和其他一些插件来执行以下操作：

async selectImage() {
    const actionSheet = await this.actionsheet.create({
      header: "Select Image source",
      buttons: [{
        text: 'Load from Library',
        handler: () => {
          this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
        }
      },
      {
        text: 'Use Camera',
        handler: () => {
          this.takePicture(this.camera.PictureSourceType.CAMERA);
        }
      },
      {
        text: 'Cancel',
        role: 'cancel'
      }
      ]
    });
    await actionSheet.present();
  }

  takePicture(sourceType: PictureSourceType) {
    var options: CameraOptions = {
      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());
    });
  }

  copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
      this.presentToast('Dispongo a actualizar.');
      this.updateStoredImages(newFileName);
    }, error => {
     // this.presentToast('Error while storing file.');
    });
  }
  updateStoredImages(name) {
    this.storage.get(STORAGE_KEY).then(images => {
      let arr = JSON.parse(images);
      if (!arr) {
        let newImages = [name];
        this.storage.set(STORAGE_KEY, JSON.stringify(newImages));
      } else {
        arr.push(name);
        this.storage.set(STORAGE_KEY, JSON.stringify(arr));
      }

      let filePath = this.file.dataDirectory + name;
      let resPath = this.pathForImage(filePath);

      let newEntry = {
        name: name,
        path: resPath,
        filePath: filePath
      };

      this.images = [newEntry, ...this.images];
      this.ref.detectChanges(); // trigger change detection cycle
    });
  }

因此，在操作表中，当我按下第一个选项（从库加载）时，它会打开库，我可以毫无问题地选择图片。当我按下 ok 时，它会抛出一个错误：copyFileToLocalDir 预期的错误。但是，如果我对第二个选项（使用相机）做同样的事情，并且我用相机拍照，它会很好地加载它，我可以稍后存储它。

我找不到问题，请帮忙。

【问题讨论】：

标签： javascript android ionic-framework

【解决方案1】：

我使用 ionic 3 使用此代码，它工作正常。在我选择一张图片后，它将上传到 firebase 并同时在 page.html 上查看它

app.module.ts 你必须导入

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

并添加了@providers 然后在 page.ts 使用此代码，您将选择一张图片：

html 视图

<button ion-button full (click)="openGallery()">open gallery</button>
<img [src]="camel_profile_image_path" />

ts页面

import { Camera, CameraOptions } from "@ionic-native/camera";
private camera: Camera,

async openGallery() {
try {
  const opstions: CameraOptions = {
    quality: 100,
    targetHeight: 600,
    targetWidth: 600,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    correctOrientation: true
  }

  const result = await this.camera.getPicture(opstions);
  const image = 'data:image/jpeg;base64,' + result;
  const pictures = storage().ref('Profile Images/' + this.randomNumber + '.jpg');
  pictures.putString(image, 'data_url');
  this.base64Image = image;
  this.camel_profile_image_path = this.randomNumber; // view the image on html page 
  this.slidetothis();
} catch (error) {
  console.error(error);
}

}

【讨论】：