nz-upload组件上传文件,如何限制文件类型、文件大小等
0.前言
项目前端使用的组件是Ant Design。最近正好调试项目看到使用nz-uoload进行文件上传。但是要求限制文件上传的类型。这篇文章简单记录一下过程。
前台用的angular+Ant Design for Angular
1.HTML文件
<nz-upload [(nzFileList)]="fileList_product"
[nzAccept]="fileType"
[nzBeforeUpload]="beforeUploadProduct"
[nzPreview]="handlePreview"
[nzShowUploadList]="false"
(nzChange)="handleChange($event)" style="float: right;">
<button nz-button nzType="primary">
<i class="anticon anticon-upload"></i><span>选择上传文件</span>
</button>
</nz-upload>
nzAccept 是可以接收的文件类型,
nzBeforeUpload 是再上传之前的文件检查,这是今天主要改动的地方
nzPreview 是预览文件方法
首先说下nzAccept,它表示上传的默认文件类型。在ts文件中可以参考下面的写法
fileType: string = '.doc,docx,.pdf,rar,.xlsx,.xls'; //文件类型
但是,问题来了,这个只能保证你默认选的文件类型是上面这些,不能保证用户选择全部文件类型。如下图:
可以看到,默认的文件类型确实是我们上面定义的哪些,但是如果用户在这个地方选择了所有文件,那么上面的文件类型限制就没用了。我们还是要想办法限制用户上传的文件类型。
2.限制文件类型的思路
主要说一下在前端限制上传文件类型的思路。一种是利用上传上来的文件类型直接判断(因为上面的操作无法限制上传的类型)。主要改动的地方是nzBeforeUpload方法。另外一种是判断文件的后缀。
先说第一种:
import { Component, OnInit, TemplateRef } from '@angular/core';
import { UploadFile, } from 'ng-zorro-antd';
import { Observable, Observer } from 'rxjs';
@Component({
selector: 'xxx',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.less']
})
export class AddComponent implements OnInit {
constructor() { }
ngOnInit() {
}
beforeUploadProduct = (file: UploadFile) =>
new Observable((observer: Observer<boolean>) => {
const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif';
debugger
if (!isType) {
console.log('只支持word、excel、pdf、rar类型!');
observer.complete();
return;
}
});
}
这里面的文件类型是固定的,可以参考下面的文件类型来使用:
office为 2007版本以后的一些 文件限制类型的 属性值
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltx application/vnd.openxmlformats-officedocument.spreadsheetml.template
.potx application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx application/vnd.openxmlformats-officedocument.presentationml.slideshow
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
.sldx application/vnd.openxmlformats-officedocument.presentationml.slide
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template
.xlsm application/vnd.ms-excel.addin.macroEnabled.12
.xlsb application/vnd.ms-excel.sheet.binary.macroEnabled.12
.doc application/msword
.xls application/vnd.ms-excel
其他的常用的:
.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type Definition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText Markup Language
*.html text/html HyperText Markup Language
*.jp2 image/jp2 JPEG-2000
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript, application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II
*.mp3 audio/mpeg MPEG Audio Stream, Layer III
*.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video
*.mpeg video/mpeg MPEG Video Stream, Layer II
*.mpg video/mpeg MPEG Video Stream, Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg, audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf, text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText Markup Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlsm application/vnd.ms-excel.sheet.macroEnabled.12
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml, application/xml Extensible Markup Language
*.zip aplication/zip Compressed Archive
第一种有个小问题,实际操作的时候,上传了一个rar文件,发现程序读不出来,然后放弃了第一种方法, 用第二种方法来写:
然后函数改成下面这样:
beforeUploadProduct = (file: UploadFile) =>
new Observable((observer: Observer<boolean>) => {
//上传文件的后缀进行判断
const isType=[""]
file.name.lastIndexOf(".")
const fileType = file.name.substring(file.name.lastIndexOf("."),file.name.length) //从后往前截取文类型
if(fileType==".doc"||fileType==".docx"||fileType==".pdf"||fileType==".rar"||fileType==".xlsx"||fileType==".xls"){
observer.next(true);
observer.complete();
}else{
console.log('只支持word、excel、pdf、rar类型!');
observer.complete();
return;
}
});
3.限制文件大小
参考代码如下:
beforeUploadProduct = (file: UploadFile) =>
new Observable((observer: Observer<boolean>) => {
const isLt2M = file.size! / 1024 / 1024 < 2;
if (!isLt2M) {
console.log('图片大小不要超过2MB!');
observer.complete();
return;
}
});
我们读取出来文件的大小,直接判断就行。