Question

在我的项目中，我需要在profile.html页上保存并显示个人资料图片。

并且还允许用户更改其个人资料图片，例如whatsapp

我在这里分享我的密码

profile.html

  <ion-content>

    <img src="{{pathForImage(lastImage)}}" style="width: 100%" 
    [hidden]="lastImage === null" class="imgcircle">

     <ion-toolbar color="primary">
      <ion-buttons>

  <button ion-button icon-left (click)="presentActionSheet()">
    <ion-icon name="camera"></ion-icon>Select Image
  </button>

  <button ion-button icon-left (click)="uploadImage()" 
  [disabled]="lastImage=== null">
    <ion-icon name="cloud-upload"></ion-icon>Upload
  </button>

  </ion-buttons>
  </ion-toolbar>

  </ion-content>

profile.ts

   export class HomePage {

   lastImage: string = null;
   loading: Loading;

   constructor(public navCtrl: NavController, private camera: Camera, private 
   transfer: Transfer, private file: File, private filePath: FilePath, public 
   actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, 
   public platform: Platform, public loadingCtrl: LoadingController) { }

   public presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
   title: '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'
    }
   ]
  });
   actionSheet.present();
  }
  }

   public takePicture(sourceType) {
  // Create options for the Camera Dialog
   var options = {
    quality: 100,
   sourceType: sourceType,
   saveToPhotoAlbum: false,
   correctOrientation: true
    };

   // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
   // Special handling for Android library
    if (this.platform.is('android') && sourceType === 
    this.camera.PictureSourceType.PHOTOLIBRARY) {
    this.filePath.resolveNativePath(imagePath)
    .then(filePath => {
      let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
      let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, 
       imagePath.lastIndexOf('?'));
      this.copyFileToLocalDir(correctPath, currentName, 
       this.createFileName());
     });
    } else {
    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
    this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
     }
     }, (err) => {
    this.presentToast('Error while selecting image.');
     });
      }

     private createFileName() {
      var d = new Date(),
      n = d.getTime(),
      newFileName =  n + ".jpg";
       return newFileName;
       }

      // Copy the image to a local folder
      private copyFileToLocalDir(namePath, currentName, newFileName) {
      this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, 
      newFileName).then(success => {
       this.lastImage = newFileName;
       }, error => {
       this.presentToast('Error while storing file.');
      });
       }

      private presentToast(text) {
      let toast = this.toastCtrl.create({
       message: text,
       duration: 3000,
       position: 'top'
         });
       toast.present();
        }

      // Always get the accurate path to your apps folder
      public pathForImage(img) {
      if (img === null) {
        return '';
         } else {
       return cordova.file.dataDirectory + img;
          }
          }

使用PHP将图像上传到服务器

        public uploadImage() {
       // Destination URL
        var url = "http://xxxx/img/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.');
           });
           }

每当用户上传图片时，它将成功上传到服务器。

但是上传个人资料照片后，当我转到下一页并返回到profile.html页面时，imag将不可见

每当用户查看profile.html页面时，我都想显示个人资料图片。

有什么想法吗？

Answer 1

Put this code in your Html file.

  <img src="{{ myphoto }}" (click)="getImage()" width="50%" height="50%" alt="Registration Image">

set this in your .ts class. myphoto:any="assets/imgs/registration_default_image.png";

this is method for open gallery and set picture .

// for open gallery

getImage() {

const options: CameraOptions = {
  quality: 70,
  destinationType: this.camera.DestinationType.DATA_URL,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  saveToPhotoAlbum:false
}
this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64:
  this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});

} //end

this will set your image from gallery.

Answer 2

Because you were getting the file directory URI while uploading. It comes from the mobile directory once you're selected and it is available temporarily at the page. After you went to another page it disappears.Well, you can check the condition for Image tag.

ex:

<img src="{{pathForImage(lastImage)}}" style="width: 100%" 
    [hidden]="lastImage === null" class="imgcircle">
and

<img src="url" style="width: 100%" 
    class="imgcircle" *ngIf="lastImage==null">

You can bind the updated url in src tag to view the uploaded profile and perform two condition to show the image .

url like https://stackoverflow.com/example.png

I hope it will help

如何在ionic3中设置个人资料图片功能

2 个答案: