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 使用相关的更多相关文章

  1. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  2. 记录项目版本升级angular4 ~ angular5

    前言: 在上一篇ng4文章<angular4--实际项目搭建总结>中说过,等到ng5正式发布,并且蚂蚁的NG ZORRO兼容ng5之后,我会对ng4项目进行升级.这篇文章就是大概说下升级的 ...

  3. 如何用ABP框架快速完成项目(6) - 用ABP一个人快速完成项目(2) - 使用多个成熟控件框架

    正如我在<office365的开发者训练营,免费,在微软广州举办>课程里面所讲的, 站在巨人的肩膀上的其中一项就是, 尽量使用别人成熟的框架. 其中也包括了控件框架   abp和52abp ...

  4. 52ABP模板 ASP.Net Core 与 Angular的开源实例项目

    阅读文本大概需要 5 分钟. 开始之前 自从上一篇文章".NET:持续进化的统一开发平台"发布后,已经有三个月的时间没有写过文章了. 这段时间,做了两场线下活动,一场在上海,一场在 ...

  5. Angular2常用命令

    一.常用命令 1.1 npm config list配置项目 可进行相关代理配置,通常可以配置在网络环境较差的情况下,配置相关代理.相关的设置命令如图: 1.2 ng 新建启动项目 ng new pr ...

  6. 2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI

    摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...

  7. 嵌入式单片机STM32应用技术(课本)

    目录SAIU R20 1 6 第1页第1 章. 初识STM32..................................................................... ...

  8. Andrew Ng机器学习笔记+Weka相关算法实现(四)SVM和原始对偶问题

    这篇博客主要解说了Ng的课第六.七个视频,涉及到的内容包含,函数间隔和几何间隔.最优间隔分类器 ( Optimal Margin Classifier).原始/对偶问题 ( Primal/Dual P ...

  9. Andrew Ng机器学习笔记+Weka相关算法实现(五)SVM最优间隔和核方法

    这一章主要解说Ng的机器学习中SVM的兴许内容.主要包括最优间隔分类器求解.核方法. 最优间隔分类器的求解 利用以一篇讲过的的原始对偶问题求解的思路,我们能够将相似思路运用到SVM的求解上来. 详细的 ...

  10. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

随机推荐

  1. springboot+jpa分库分表项目实例

    分库分表场景 关系型数据库本身比较容易成为系统瓶颈,单机存储容量.连接数.处理能力都有限.当单表的数据量达到1000W或100G以后,由于查询维度较多,即使添加从库.优化索引,做很多操作时性能仍下降严 ...

  2. 暑期班--JAVA无敌课程---第一天-Day01-----Java基础

    1.Java发展历史 1.1Games Golsing Java创始人 2.What is JDK 3.记本本开发第一个Java程序 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴拉 巴拉巴 ...

  3. JavaScript:了解一下函数式编程

    一.简介 在JavaScript中,函数就是第一类公民,它可以像字符串.数字等变量一样,使用var修饰并作为数据使用.它可以作为数值.可以作为参数.还可以作为返回结果.可以说JavaScript就是函 ...

  4. 用OC实现双向链表:构造链表、插入节点、删除节点、遍历节点

    一.介绍 双向链表:每一个节点前后指针域都和它的上一个节点互相指向,尾节点的next指向空,首节点的pre指向空. 二.使用 注:跟单链表差不多,简单写常用的.循环链表无法形象化打印,后面也暂不实现了 ...

  5. jQuery 源码分析(十六) 事件系统模块 底层方法 详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...

  6. Mac(PC)连接虚拟机MySQL失败

    解决: 首先登陆虚拟机的MySQL use mysql; select host,user from user; 可以看到,默认的mysql只允许本机访问 将host设置为通配符模式%,Host设置为 ...

  7. Java开发桌面程序学习(12)——Javafx 悬浮窗提示 tooptip

    Javafx 悬浮窗提示 tooptip 鼠标悬浮在某个控件,弹出提示,效果如下: 代码: //control是某个控件 Tooltip.install(control, new Tooltip(&q ...

  8. Latex学习笔记 第一章

    1.使用空行分段. 空行只起分段的作用,使用过多的空行并不起增大段间间距的作用. 2.段前不用打空格,LateX会自动完成文字的缩进. 即使打了也会被自动忽略. 3.通常汉字后面的空格会被忽略,其他符 ...

  9. Java日期时间API系列1-----Jdk7及以前的日期时间类

    先看一个简单的图: 主要的类有: Date类负责时间的表示,在计算机中,时间的表示是一个较大的概念,现有的系统基本都是利用从1970.1.1 00:00:00 到当前时间的毫秒数进行计时,这个时间称为 ...

  10. 关于UIScollView中的contentOffset的理解

    大家对UIScollView 中的contentOffset 一直有疑问. 当时我也有好多疑问,后来在网上找了一下资料,发现没有找到合理的解释,因此自己就查看了一下官方文档,自己好好的研究了一番. 现 ...