JavaScript 上傳文件限制參數(shù)案例詳解

更新時(shí)間：2021年09月13日 14:30:45 作者：箴水_Protaos

這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

項(xiàng)目場(chǎng)景：

1，上傳文件限制

功能作用：

1，防止前端操作上傳異常文件
2，限制符合的規(guī)則，優(yōu)化展示模型

功能實(shí)現(xiàn)：

1，獲取file實(shí)例
2，執(zhí)行校驗(yàn)規(guī)則方法

代碼如下：

//大小限制
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() {
			//分析數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行判斷 符合規(guī)則 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)
          //分析數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行判斷 符合規(guī)則 resolve()
        }
        video.src = url
        video.load() // fetches metadata
      }).then(
        () => {
          return true
        },
        () => {
          //操作提示
          return Promise.reject()
        }
      )
}

實(shí)際調(diào)用

//獲取file實(shí)例
Screen(){
	//獲取權(quán)限規(guī)則
    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
      //輸出結(jié)果
      return isFileSize && isFileType && isImageLimit
    } else if (fileLimit&& fileLimit.type * 1 === 2) {
    //視頻素材
      const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
      //輸出結(jié)果
      return isFileSize && isFileType && isVideoLimit
    } else {
    //不限制
    //輸出結(jié)果
      return isFileSize && isFileType
    }
}