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

我现在需要写一个方法,通过判断图片的长度和文件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..所以才无法实现这个效果..能够改进?

阅读 12.6k
4 个回答

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();
        }
      });
    },
    ...
}

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

应该是无法实现的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题