脚本宝典收集整理的这篇文章主要介绍了angular2-image-upload ng2图片上传插件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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
以上是脚本宝典为你收集整理的angular2-image-upload ng2图片上传插件全部内容,希望文章能够帮你解决angular2-image-upload ng2图片上传插件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。