專案場景：

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()
 http://www.cppcns.com
 
       }
    )
},//上傳格式限制
checkFileType(file,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()
        XKTGY  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()
 www.cppcns.com
 
       }
        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
    }
}

內容總結：

1，獲取例項
2，執行方法。

到此這篇關於 上傳檔案限制引數案例詳解的文章就介紹到這了,更多相關 上傳檔案限制引數內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！