Solution to Element-ui upload file upload restriction

question

Adding the type of uploaded file in accept only plays a "superficial" role. After selecting "all files", you can still upload any type of file, which has no restrictive effect at all.

Solution

Make a judgment in the before-upload hook (the hook before uploading files, the parameter is the uploaded file, if it returns false or returns a Promise and is rejected, the uploading will be stopped.) There is a pitfall here. When you set :auto-upload="false", this hook will not be triggered, so you can also make a judgment in on-change.

On the code

// :before-upload or :on-change binding method beforeUpload(file, fileList) {
   if (file.size / (1024 * 1024) > 500) { // Limit file size this.$message.warning(`The current limit file size cannot be greater than 500M`)
     return false
   }
   
   let suffix = this.getFileType(file.name) //Get the file suffix let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //Limited file types, define them according to the situation if (suffixArray.indexOf(suffix) === -1) {
     this.$message({
       message: 'File format error',
       type: 'error',
       duration: 2000
     })
   }
   return suffixArray
 },
 getFileType(name) {
   let startIndex = name.lastIndexOf('.')
   if (startIndex !== -1) {
     return name.slice(startIndex + 1).toLowerCase()
   } else {
     return ''
   }
 }

This is the end of this article about the solution to Element-ui upload file restrictions. For more information about Element upload restrictions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!