angular2-image-upload ng2圖片上傳插件

一、 安裝模塊

npm install angular2-image-upload --save

二、配置app.module.ts

@NgModule({
    imports: [
        ...,
        ImageUploadModule.forRoot(),
        ...
    ]
})

三、模板中使用

<image-upload></image-upload>

四、配置信息

[max]="100"  最大上傳文件個數
  [url]="'example.com/images/upload'" 上傳服務器地址
  [headers]="[
    {header: 'Authorization', value: 'MyToken'}
  ]"
  [buttonCaption]="'選擇圖片'"
  [dropBoxMessage]="'拖動到此區域'"
    // 添加圖片
  (onFileUploadFinish)="imageUploaded($event)"
    // 刪除圖片
  (onRemove)="imageRemoved($event)"
    // 處於掛起狀態時候，觸發這個事件，上傳中，能夠禁止肯定按鈕等...
  (isPending)="disableSendButton($event)"

五、處理選擇的圖片信息

// 組件
import {Component} from "@angular/core";
@Component({
  selector: "oa-add-friends",
  templateUrl: "../templates/add_friends.component.html"
})
export class AddFriendsComponent {
  file: Array<Object>;
  constructor() {
    this.file = [];
  }

  imageUploaded(event) {
    console.log(event);
    this.file.push(event.file);
    console.log(this.file);
  }
  imageRemoved(event) {
    console.log(event);
    let index = this.file.indexOf(event.file);
    if( index > -1) {
      this.file.splice(index, 1);
    }
    console.log(this.file);
  }
}

// 界面
<image-upload
  [buttonCaption]="'選擇圖片'"
  [dropBoxMessage]="'拖動圖片到這裏'"
  (onFileUploadFinish)="imageUploaded($event)"
  (onRemove)="imageRemoved($event)"
></image-upload>

<p *ngFor="let item of file">
  {{item.name}}
</p>

六、修改模板樣式

/Users/zhangxuchao/www/oa/node_modules/angular2-image-upload/lib/image-upload/image-upload.component.js

修改裏面的template和styles