JavaScript 前端文件上传限制实现详解

作者：闭包旅人

时间：2026-10-24

本文详解如何在JavaScript前端实现文件上传时的限制逻辑，包括获取File实例、校验文件大小与类型，以及针对图片视频的尺寸限制。通过Promise封装校验方法，确保上传文件符合预设规则，优化用户体验并防止异常文件提交。

文章目录

项目背景：

1. 文件上传限制

功能目标：

1. 避免前端上传不符合规范的异常文件 2. 限定符合要求的规则，优化展示效果

功能实现：

1. 获取File对象实例 2. 执行校验规则方法

代码示例：


//大小限制
checkFileSize(file, rules) {
    return new Promise((resolve, reject) => {
        file.size / 1024 / 1024 > rules ? reject() : resolve()
    }).then(
        () => {
          return true
        },
        () => {
			//操作提示
          return Promise.reject()
        }
    )
},
//上传格式限制
checkFileType(file, rules) {
    return new Promise((resolve, reject) => {
        rules && rules.includes(file.type) ? resolve() : reject()
    }).then(
      () => {
          return true
      },
      () => {
          //操作提示
          return Promise.reject()
      }
    )
},
//宽高比例(图片)
checkImageWH(file, rules) {
    const _this = this
    return new Promise((resolve, reject) => {
    	//读取文件
        const filereader = new FileReader()
        filereader.readAsDataURL(file)
        filereader.onload = e => {
          const src = e.target.result
          const image = new Image()
          image.onload = function() {
			//分析数据，对数据进行判断 符合规则 resolve()
		}
          image.onerror = reject
          image.src = src
        }
    }).then(
        () => {
          return true
        },
        () => {
          //操作提示
          return Promise.reject()
        }
    )
},
//宽高比例(视频)
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)
          //分析数据，对数据进行判断 符合规则 resolve()
        }
        video.src = url
        video.load() // fetches metadata
      }).then(
        () => {
          return true
        },
        () => {
          //操作提示
          return Promise.reject()
        }
      )
}

实际调用方式


//获取file实例
Screen(){
	//获取权限规则
    const { filesSize, filesFormat, fileLimit} = this    // 文件大小、文件类型、图片/视频宽高限制
    //传参判断
    const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true
    const isFileType = filesFormat ? await this.checkFileType(file, filesFormat) : true
	//图片素材   
    if (fileLimit && fileLimit.type * 1 === 1) {
      const isImageLimit = fileLimit? await this.checkImageWH(file, fileLimit) : true
      //输出结果
      return isFileSize && isFileType && isImageLimit
    } else if (fileLimit&& fileLimit.type * 1 === 2) {
    //视频素材
      const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
      //输出结果
      return isFileSize && isFileType && isVideoLimit
    } else {
    //不限制
    //输出结果
      return isFileSize && isFileType
    }
}