Detailed Explanation of JavaScript Upload File Restriction Parameter Case

Project scenario:

1. Restrictions on uploading files

Functions:

1. Prevent front-end operations from uploading abnormal files
2. Limit the conforming rules and optimize the display model

Function realization:

1. Get an file instance
2. Execute verification rule method

The code is as follows:

// Size limit 
checkFileSize(file, rules) {
    return new Promise((resolve, reject) => {
        file.size / 1024 / 1024 > rules ? reject() : resolve()
    }).then(
        () => {
          return true
        },
        () => {
			// Operation tips 
          return Promise.reject()
        }
    )
},
// Upload format restrictions 
checkFileType(file, rules) {
    return new Promise((resolve, reject) => {
        rules && rules.includes(file.type) ? resolve() : reject()
    }).then(
      () => {
          return true
      },
      () => {
          // Operation tips 
          return Promise.reject()
      }
    )
},
// Width-height ratio ( Picture )
checkImageWH(file, rules) {
    const _this = this
    return new Promise((resolve, reject) => {
    	// Read a file 
        const filereader = new FileReader()
        filereader.readAsDataURL(file)
        filereader.onload = e => {
          const src = e.target.result
          const image = new Image()
          image.onload = function() {
			// Analyze the data and judge the data   Comply with the rules  resolve()
		}
          image.onerror = reject
          image.src = src
        }
    }).then(
        () => {
          return true
        },
        () => {
          // Operation tips 
          return Promise.reject()
        }
    )
},
// Width-height ratio ( Video )
checkVideoWH(file, rules) {
      return new Promise(function(resolve, reject) {
        var url = URL.createObjectURL(file)
        var video = document.createElement('video')
        video.onloadedmetadata = evt => {
          URL.revokeObjectURL(url)
          // Analyze the data and judge the data   Comply with the rules  resolve()
        }
        video.src = url
        video.load() // fetches metadata
      }).then(
        () => {
          return true
        },
        () => {
          // Operation tips 
          return Promise.reject()
        }
      )
}

Actual call

// Get file Instances 
Screen(){
	// Get permission rules 
    const { filesSize, filesFormat, fileLimit} = this    //  File size, file type, picture / Video width and height limit 
    // Parameter transmission judgment 
    const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true
    const isFileType = filesFormat ? await this.checkFileType(file, filesFormat) : true
	// Picture material    
    if (fileLimit && fileLimit.type * 1 === 1) {
      const isImageLimit = fileLimit? await this.checkImageWH(file, fileLimit) : true
      // Output result 
      return isFileSize && isFileType && isImageLimit
    } else if (fileLimit&& fileLimit.type * 1 === 2) {
    // Video material 
      const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
      // Output result 
      return isFileSize && isFileType && isVideoLimit
    } else {
    // Unlimited 
    // Output result 
      return isFileSize && isFileType
    }
}

Content summary:

1. Get an instance
2. Implementation method.