七牛上传前获取图片尺寸

Question

业务需求在图片上传之前，取得图片的尺寸进行判断。

现在的做法是在页面里面放了一个隐藏的img标签，然后利用七牛的接口BeforeUpload方法里面file参数，使用plupload提供的aip，file.getNative()，转换url插入图片里面，但是这样做，需要用setTimeout延迟100毫秒才能获取到图片的宽高信息。

'BeforeUpload': function(up, file) {
    // 每个文件上传前,处理相关的事情
    let testImgSrc=file.getNative();
    let temUrl=window.URL.createObjectURL(testImgSrc);
    let objImg = document.querySelector('.testImg');
    objImg.src = temUrl;
    setTimeout(()=>{
        console.log(objImg.naturalWidth);
        console.log(objImg.naturalHeight)
    },100);
}

因为用到了setTimeout，即使获取到了图片的尺寸不符合标准，但是也不能阻止七牛的UploadProgress方法执行了了。

另外：我看了plupload的文档里面，filters也不能限制width跟height，只有resize。
但是resize不太符合需求。

各位有更好的解决办法吗？

Answer 1

目前没有找到合适的方法处理，只能换个思路了，上传完毕之后，获得图片信息，然后判断是否符合。
如果不符合，尝试使用七牛提供的delete api删除资源。
先用这个方式弄着了。

Answer 2

这样你就可以获取到宽高了, 如果还获取不到你找我我负责。
'BeforeUpload': function (up, file) {

        // 每个文件上传前,处理相关的事情
        var reader = new FileReader();
        reader.onload = function (e) {
          console.log(e);
          var data = e.target.result;
          //加载图片获取图片真实宽度和高度
          var image = new Image();
          image.onload=function(){
            var width = image.width;
            var height = image.height;
            alert(width+'======'+height+"=====");
          };
        };
      },

Answer 3

我现在也用七牛存贮图片 但是没用它的js上传组件 使用的是百度的webuploader这个就可以获取图片的尺寸以及大小了 而且可以多图上传 很方便 后台是先存本地然后调用七牛的API存到七牛 在删除本地的

Answer 4

图片有个naturalwidth和naturalheight属性，可获取原始大小。还不行重新读取blob

Answer 5

将auto_start设置为false,再把你这个图片预览的代码写到FilesAdded 函数里面,然后做尺寸判断,符合才执行主动提交上传。

Answer 6

大神。怎么在filesAdded里实现图片预览啊 急求