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;
}
});
我們讀取出來文件的大小，直接判斷就行。