SOURCE

console 命令行工具 X clear

                    
>
console
let fileDom = document.getElementById("file");

fileDom.onchange = function(ev){
  let e = ev || window.ev;
  let isFileValidate = fileValidate(e.target.files[0],['png','jpg','bmp'],5);
  console.table(isFileValidate);
  
  if(isFileValidate.type && isFileValidate.len && isFileValidate.size){
    uploadFile(e.target.files[0])
  }
}

function uploadFile(obj){
  console.log("开始上传")
}

/**
 * Name fileValidate
 * @param file {Object} 表单文件
 * @param allowTypes {Array} 允许的文件格式
 * @param maxSize {Number}   允许文件大小
 */
function fileValidate(file, allowTypes, maxSize) {
  console.log("选中的文件",file)
  //allowTypes.push('jpeg')
  let theType = file.type.substring(file.type.lastIndexOf('/') + 1);
  let allowType = false;
  
  //type
  if (allowTypes.includes(theType)) {
    allowType = true;
  } else {
    allowType = false;
  }

  //size
  const allowSize = file.size / 1024 / 1024 < maxSize;

  //width and height
  let allowLen = true
  async function getLen(){
    let promise = new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(event){
        let e = event || window.event;
        let image = new Image();
        image.src = e.target.result;
        image.onload=function(e){
          if(image.width < 100 || image.height < 100){
          	reject(new Error('whoops!'))
          }else{
          	resolve(true);
          }
        }
      }
    })
    
    let result = await promise;
    console.table("await结果",result,await promise)
    return result
  };
  //console.log("getLen",getLen())

  return {
    type: allowType,
    size: allowSize,
    len: getLen(),
  }
}
<h4>打开Console控制台调试工具</h4>
<input class="input-file" type="file" id="file" name="file">