Question

我正在为我使用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中预期的错误。但是，如果我对第二个选项（“使用相机”）执行相同的操作，并且使用相机拍摄了照片，则可以很好地加载它，以后可以存储它。

我找不到问题，请帮忙。

Answer 1

im使用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);
}

}

从PhotoLibrary拾取图像不起作用-Ionic 4

1 个答案: