antd upload组件的beforeupload的支持返回值的问题

Question

我现在需要写一个方法，通过判断图片的长度和文件size来返回true或者false

console.log('file want upload ', file);
    let reader = new FileReader();
    reader.readAsDataURL(file);
    if (file.size > 1024*1024*3) { // 大于3M
      message.error('您上传的图片过大！请重新上传');
      return false;
    }
    let img = new Image();
    return (function () {
      let flag: boolean=true;
      ((flag) => {
        reader.onloadend = function(evt){
          img.src    = this.result;
          let width  = img.width;
          let height = img.height;
          console.log(width);
          console.log(height);
          if (width < 2000 && height < 2000) {
            flag = true;
          } else {
            flag = false
          }
        }
      })(flag)
      return flag;
    })()

但是这个很明显函数会先返回..所以onloadend里面修改flag的值实际上是无效的，我该怎样处理才能实现在onloadend之后再让外层函数返回结果呢？

========update========
正是因为upload组件的beforeUpload在return promise时直接判为false..所以才无法实现这个效果..能够改进？

Answer 1

beforeupload可以返回一个promise
代码：

:before-upload="beforePosterUpload"

methods:{
    ...
    beforePosterUpload(file){ // 绑定在
      this.uplaodData.key = '';
      return this.beforeUploadImg(file,true); //带尺寸
    },
    beforeUploadImg(file,hasSize){
      let _URL = window.URL || window.webkitURL;    
      let img = new Image();
      img.src = _URL.createObjectURL(file); 
      let size = '';
      let key = '';
      let that = this;
      // 返回promise
      return new Promise(function(resolve,reject){
        img.onload = ()=>{
          size = 'wd_'+ img.width +'×'+ img.height;
          key = new Date().getTime()+'_'+that.rndNum(5); //七牛上存储的名字
          that.uplaodData.key = key+(hasSize?size:'');
          that.getToken();
          resolve(); // 处理完成后resolve();
        }
      });
    },
    ...
}

Answer 2

setTimeOut？

Answer 3

引入异步流程控制啊。。promise什么的

Answer 4

应该是无法实现的。