1、 安装模块
npm install angular2-image-upload --save
2、配置app.module.ts
@NgModule({
imports: [
...,
ImageUploadModule.forRoot(),
...
]
})
3、模板中使用
<image-upload></image-upload>
4、配置信息
[max]="100" 最大上传文件个数
[url]="'example.com/images/upload'" 上传服务器地址
[headers]="[
{header: 'Authorization', value: 'MyToken'}
]"
[buttonCaption]="'选择图片'"
[dropBoxMessage]="'拖动到此区域'"
// 添加图片
(onFileUploadFinish)="imageUploaded($event)"
// 删除图片
(onRemove)="imageRemoved($event)"
// 处于挂起状态时候,触发这个事件,上传中,可以禁止确定按钮等...
(isPending)="disableSendButton($event)"
5、处理选择的图片信息
// 组件
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>
6、修改模板样式
/Users/zhangxuchao/www/oa/node_modules/angular2-image-upload/lib/image-upload/image-upload.component.js
修改里面的template和styles
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。