NG-ZORRO 使用相关
Upload上传
import { Component, Input, Output, EventEmitter, Inject } from '@angular/core';
import { NzMessageService, UploadFile, UploadFilter, UploadXHRArgs } from 'ng-zorro-antd';
import {
HttpRequest,
HttpClient,
HttpEventType,
HttpEvent,
HttpResponse
} from '@angular/common/http';
import { forkJoin } from 'rxjs';
import { HttpService } from './httpService';
export class File {
uid: '';
name: '';
status: 'done';
url: '';
}
export class UploadFileType {
'fileId': '';
'fileName': '';
'fileSize': '';
'fileUrl': '';
'sequence': '0';
} @Component({
selector: 'UploadPictureCardComponent',
template: `
<nz-upload
[nzAction]='urlConfig.url+"文件上传地址后缀"'
(nzChange)="handleChange($event)"
nzListType="picture-card"
[nzBeforeUpload]="beforeUpload"
[nzFilter]="filters"
[nzShowUploadList]="false"
[(nzFileList)]="fileList">
<i class="anticon anticon-plus"></i>
<div *ngIf='!childIsLoad' class="ant-upload-text">Upload</div>
<div *ngIf='childIsLoad' class="ant-upload-text">文件上传中{{progress}}...</div>
</nz-upload>
`
})
export class UploadPictureCardComponent {
fileList: File[] = [];
uploadFiles: UploadFileType[] = [];
previewImage = '';
previewVisible = false;
progress = ''; //上传进度
@Input() childIsLoad;
@Input() flieSessionStoragesName; //文件存在sessionStorage中的键值
@Output() private childOuter = new EventEmitter(); //子组件向父组件传值
@Output() private childIsLoadOuter = new EventEmitter(); //告诉父组件是否上传中
constructor(
private msg: NzMessageService,
private httpService: HttpService,
@Inject('urlConfig') public urlConfig
) {}
ngOnInit() {
//初始化文件
} //上传限制
filters: UploadFilter[] = [
{
name: 'type',
fn: (fileList: UploadFile[]) => {
const filterFiles = fileList.filter(
w =>
~['image/png', 'image/jpg', 'image/gif', 'image/bmp', 'image/jpeg'].indexOf(
w.type
)
);
if (filterFiles.length !== fileList.length) {
this.msg.create('error', '请上传png、jpg、gif、bmp、jpeg格式的图片!');
return filterFiles;
}
return fileList;
}
}
];
//上传之前的操作
beforeUpload = (file: File) => {
let ispass = true; //是否继续往下执行
console.log('上传之前的操作');
//以下操作在
if (window.sessionStorage.getItem(this.flieSessionStoragesName)) {
let list_ = JSON.parse(window.sessionStorage.getItem(this.flieSessionStoragesName));
for (let i in list_) {
if (file.name == list_[i].fileName) {
ispass = false;
this.msg.create('warning', '请勿上传同名文件!');
break;
}
}
}
return ispass; //返回true继续执行,false直接停止
}; //开始、上传进度、完成、失败都会调用这个函数
handleChange(info: any): void {
console.log(info);
if (info.type == 'start') {
this.childIsLoadOuter.emit(true); //告诉父组件上传中
this.progress = '0%';
}
if (info.type == 'progress') {
this.progress = info.event.percent.toFixed(2) + '%';
}
if (info.type === 'success') {
this.progress = '';
console.log(info);
let file = new UploadFileType();
file.fileId = info.file.response['data'].id;
file.fileName = info.file.response['data'].name;
file.fileSize = info.file.response['data'].size;
file.fileUrl = info.file.response['data'].downloadUrl;
file.sequence = '0';
this.childOuter.emit(file); //向父组件传值
this.childIsLoadOuter.emit(false); //告诉父组件上传完成
this.msg.create('success', '上传成功!');
}
if (info.type === 'error') {
this.childIsLoadOuter.emit(false); //告诉父组件上传完成
}
}
}
NG-ZORRO 使用相关的更多相关文章
- Angular: 执行ng lint后如何快速修改错误
当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...
- 记录项目版本升级angular4 ~ angular5
前言: 在上一篇ng4文章<angular4--实际项目搭建总结>中说过,等到ng5正式发布,并且蚂蚁的NG ZORRO兼容ng5之后,我会对ng4项目进行升级.这篇文章就是大概说下升级的 ...
- 如何用ABP框架快速完成项目(6) - 用ABP一个人快速完成项目(2) - 使用多个成熟控件框架
正如我在<office365的开发者训练营,免费,在微软广州举办>课程里面所讲的, 站在巨人的肩膀上的其中一项就是, 尽量使用别人成熟的框架. 其中也包括了控件框架 abp和52abp ...
- 52ABP模板 ASP.Net Core 与 Angular的开源实例项目
阅读文本大概需要 5 分钟. 开始之前 自从上一篇文章".NET:持续进化的统一开发平台"发布后,已经有三个月的时间没有写过文章了. 这段时间,做了两场线下活动,一场在上海,一场在 ...
- Angular2常用命令
一.常用命令 1.1 npm config list配置项目 可进行相关代理配置,通常可以配置在网络环境较差的情况下,配置相关代理.相关的设置命令如图: 1.2 ng 新建启动项目 ng new pr ...
- 2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI
摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...
- 嵌入式单片机STM32应用技术(课本)
目录SAIU R20 1 6 第1页第1 章. 初识STM32..................................................................... ...
- Andrew Ng机器学习笔记+Weka相关算法实现(四)SVM和原始对偶问题
这篇博客主要解说了Ng的课第六.七个视频,涉及到的内容包含,函数间隔和几何间隔.最优间隔分类器 ( Optimal Margin Classifier).原始/对偶问题 ( Primal/Dual P ...
- Andrew Ng机器学习笔记+Weka相关算法实现(五)SVM最优间隔和核方法
这一章主要解说Ng的机器学习中SVM的兴许内容.主要包括最优间隔分类器求解.核方法. 最优间隔分类器的求解 利用以一篇讲过的的原始对偶问题求解的思路,我们能够将相似思路运用到SVM的求解上来. 详细的 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
随机推荐
- Java之Random类
什么是Random类 此类的实例用于生成伪随机数,使用此类中的方法能够得到一个随机数. Random使用步骤 查看类 java.util.Random :该类需要 import导入使后使用. 查看构造 ...
- flask之web网关、三件套、配置、路由(参数、转化器及自定义转化器)、cbv、模板语言、session
目录 1.wsgiref.py 2.werzeug.py 3.三件套 4.配置文件 5.路由本质 6.cbv.py 7.路由转化器 8.自定义转化器 9.模板语言 10.session原理 11.te ...
- 4.P1产品经理该如何学习提升
0经验.想转型 对于想转型或者没有经验的人,这部分同学你肯定对产品本身有一定的了解了,但是在这个时候转型最痛苦的是你要从原来的工作转到一个新的工作中的时候,要回到一个原点.比如你是原来是做开发的,那么 ...
- 描述符(__get__和__set__和__delete__)
目录 一.描述符 二.描述符的作用 2.1 何时,何地,会触发这三个方法的执行 三.两种描述符 3.1 数据描述符 3.2 非数据描述符 四.描述符注意事项 五.使用描述符 5.1 牛刀小试 5.2 ...
- SpringMVC日期类型接收空值异常问题
最近遇到SpringMVC写个controller类,传一个空串的字符类型过来,正常情况是会自动转成date类型的,因为数据表对应类类型就是date的 解决方法是在controller类的后面加个注解 ...
- 基于appium的常用元素定位方法
一.元素定位工具 app应用的元素使用的是控件定位,不同于web网页,web网页定位元素通常使用的是F12工具,那么在app当中我们则要借助其它的工具来辅助定位. 1.uiautomatorviewe ...
- SqlServer ----- 根据查询语句创建视图
我们都知道视图的本质就是查询语句,那么就可以根据查询语句创建视图, 前提 知道视图的组成,已经写好的sql 语句,多表或单表的查询语句,将查询语句变成视图. 所以视图可以由单表,多表或视图加表构成. ...
- Python线程与进程 I/O多路复用
SSHClient Paramiko模块 远程执行命令 #用户名密码方式: import paramiko ssh = paramiko.SSHClient() ssh.set_missing_hos ...
- 关于Spring Boot你不得不知道的事
1 Spring Boot官网[2.1.5 CURRENT GA] 1.1 Pivotal Wiki Pivotal Software, Inc. is a software and services ...
- Dynamics CRM中的操作(action)是否是一个事务(transaction)?
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复168或者20151104可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 以前的博文 微软Dynamics ...