Angular+ionic 实现上传图片

使用angular实现上传图片，包括图片的预览以及删除， 图片的预览及删除是用的ionic 的popover 实现的，效果如下：

1. 上传图片部分代码的实现

upload.html

    <div class="picture-number">
    <p >图片上传</p>
    <p >{{uploadPictureNum}}</p>
    </div>
    <div>
    <ul class="upload-files"> 
      <li class="upload-file" *ngFor="let image of previewImageUrl" [style.background-image]="image.fileUrl" (click)="previewImg(image.fileUrl)"></li>
    </ul>    
    <div class="upload-input-box">
      <input class="upload-input-box-img" type="file" accept="image/*" multiple (change)="selectPicture($event)" />
    </div>
    </div>

upload.ts

  //after picture selected
    selectPicture(event:any){
      this.files = event.target.files;
      for (let index=0; index<this.files.length; index++){
	    this.uploadPictureNum ++;
	    //this.setImageUrl(this.files[index]);
	    this.taskProvider.uploadPicture(this.files[index]).subscribe(
		(res)=>{
		    //set image url and value
	    	    this.setBackgroundImg(this.files[index],res);
		},
		(error)=>{
			console.log(error);
		}
	    );
	}
  }

  //set background-img for li element
    setBackgroundImg(file: File, value: string){
	let url = 'url('+window.URL.createObjectURL(file)+')';
	let safeUrl = this.sanitizer.bypassSecurityTrustStyle(url);
	this.previewImageUrl.push({fileUrl:safeUrl, value:value});
  }


    //preview image, use popover
    previewImg(url: SafeStyle){
	let popover = this.popoverCtrl.create(previewImg,{
	    imageUrl:url
	});

	 popover.present();
	
	popover.onDidDismiss( (data)=>{
	    //delete image
	    if(data){
		//this.previewImageUrl.splice(this.previewImageUrl.indexOf(data),1);
		this.previewImageUrl = this.previewImageUrl.filter((image)=>image.fileUrl !== url);
		this.uploadPictureNum--
	    }
	})
    }

2.上传图片到server上的provider 的uploadPicture部分的代码如下，使用FormData的格式上传

  //upload picture
  uploadPicture(file:File):Observable<any>{
	const formData: any = new FormData();
	formData.append('file',file,file.name);
	return this.authHttp.post(this.getServiceUrl(), formData).map((res)=>{
	       let restResult = res.json() as RestResult<string>;
	       return restResult.value;
	});
  }

3. 这里使用ionic的popover 弹出预览图片的页面，如果不是写app 也可以不用popover弹出，使用其它方式将这个页面显示成弹出的效果，图片预览页面previewImg的代码如下：

previewImg.html

<div class="preview">
  <span class="preview-img" [style.background-image]="imageUrl" (click)="dismissImage('dismissOnly')"></span>
  <div class="delete-img" (click)="dismissImage('delete')">
    <ion-icon name="trash"></ion-icon>
  </div>
</div>

previewImg.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { SafeStyle } from "@angular/platform-browser";
@Component({
	selector: 'app-previewImg',
	templateUrl: 'previewImg.html',
})
export class previewImg{
    imageUrl: SafeStyle;
    
    constructor(public navParams: NavParams, public viewCtrl: ViewController){}

    ngOnInit(){
	if(this.navParams.data){
	    this.imageUrl = this.navParams.data.imageUrl;
	}
    }

    dismissImage(option: string){
	//delete image
	if(option==='delete'){
	    this.viewCtrl.dismiss('delete image');
	}
	//dismiss image only
	else{
	    this.viewCtrl.dismiss();
	}
    }
}