The component used at the front end of the project is Ant Design. Recently, I happened to see the debugging project using NZ uoload to upload files. However, it is required to limit the type of file upload. This article briefly records the process.
angular+Ant Design for Angular
nzAccept is the file type that can be received,
nzBeforeUpload is the file check before re uploading, which is the main change today
nzPreview is the method of previewing files
First, let's talk about nzAccept, which indicates the default file type to upload. In the ts file, you can refer to the following writing method
fileType: string = '.doc,docx,.pdf,rar,.xlsx,.xls'; //file type
However, the problem comes. This can only ensure that the above file types are selected by default, and it can not guarantee that users can select all file types. As shown below:
You can see that the default file types are indeed those defined above, but if the user selects all files in this place, the above file type restrictions are useless. We still have to find a way to limit the types of files uploaded by users.
2. Ideas on limiting file types
Mainly talk about the idea of limiting the types of uploaded files at the front end. One is to use the uploaded file type to judge directly (because the above operation cannot limit the uploaded type). The main change is the nzBeforeUpload method. The other is to judge the suffix of the file.
Let's start with the first:
The file types are fixed. You can refer to the following file types:
office restricts attribute values of types for some files after the 2007 version
.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
The first one has a small problem. During actual operation, I uploaded a rar file and found that the program can't read it. Then I gave up the first method and wrote it in the second method:
Then change the function to the following:
3. Limit file size
Reference codes are as follows:
We read out the size of the file and judge it directly.