1. Bind the hook before uploading files
2. Write verification in the hook before file upload
file: built-in parameters, some attributes about the uploaded file, file name, type, etc.
acceptFileType: An array of supported file formats is defined by itself, which is convenient for later changes.
type: Why file.name instead of file.type? It is because some file types cannot read the value, and the name error tolerance rate is lower.
file.name.split("."): String to array, separated by . So it becomes ['file name', 'suffix'] such as ['resume', 'docx']
.slice(-1)[0]: -1 gets the last one, which is the example in the example: ['docx'] and then gets 'docx' through [0]
.toLowerCase(): Uppercase to lowercase In order to avoid the suffix of some uploaded file names being uppercase, it is converted to lowercase for uniformity.
!acceptFileType.includes(type): Syntax: array.includes (one in the array), whether a certain one is included in the array, add a front! That is, if the array does not contain type, then give a prompt to block!
3. Code
handleBefore(file){
let acceptFileType = ['docx','pdf','doc']
let type = file.name.split(".").slice(-1)[0].toLowerCase()
console.log(file);
if(!acceptFileType.includes(type)){
setTimeout(() => {
this.$notify({
title: "Reminder",
message: "Format error!",
type: "error"
})
},50)
return false
}
return true;
},