Javascript的Promise对象实践

    前段时间，产品经理急匆匆过来说，我们的图片裁剪插件有问题，要求的图片大小是438*286，结果使用裁剪插件来裁剪刚好大小的图片，反而还要裁剪，而且还被模糊了。由于裁剪图片插件是另外同事写的，肯定是哪里参数设置不对。线上BUG紧急，我就想出一个方案。碰到小于438*286的图片，不调用裁剪插件，直接上传，这样就快速完美避过BUG。应该知道判断图片大小的方法都是异步的，所以肯定要使用回调函数来搞定。但是一看代码，晕倒了，使用了箭头函数，一长串，不想改代码（这也是乱用箭头函数的缺陷）。于是想使用之前用的Promise对象来解决，链式调用，避免了回调函数黑洞：

首先判断图片大小，如果小于438*286,就resove上传图片显示效果，否则reject调用图片裁剪插件。效果如下

 

图片预览的代码：

        <div class="img">
                <img :src="currentImg" alt>
            </div>

 

判断图片大小的代码，必须是异步的，这也是为什么使用Promise的重要原因

judgeTailor(file) {

// 判断是直接上传，还是裁剪

return new Promise((resolve, reject) => {

let reader = new FileReader();

reader.onload = e => {

let data = e.target.result;

let image = new Image();

image.onload = (event) => {

let m = event.target;

let w = m.width;

let h = m.height;

console.log("图片宽高为 width:" + w + ",height:" + h);

// 图片宽高小于等于438*286 ,直接上传

if (w <= 438 && h <= 286) {

console.log("图片直接上传");

resolve();

} else {

console.log("图片需要裁剪");

reject(data);

}

 

}

image.src = data;

 

}

reader.readAsDataURL(file);

})

}

}

调用的judgeTailor来判断，

this.judgeTailor(file).then(() => {

this.uploadFileDirect(file);

}, (data) => {

// 这就是坑爹的代码，

var url = data;

this.$vux.loading.hide();

fixOrientation(

url, {

image: true

},

(fixed, image) => {

this.visible = true;

this.$vux.loading.hide();

this.dealImage(fixed, baseUrl => {

// console.log(baseUrl);

new AlloyCrop({

image_src: baseUrl,

className: "crop-box",

width: 320, // crop width

height: 209, // crop height

output: 1.37, // output resolution --> 400*200

type: "jpeg",

ok: (base64, canvas) => {

this.upload = true;

this.currentImg = base64;

this.blob = this.dataURItoBlob(base64);

this.visible = false;

this.$refs.fileBtn.value = null;

console.log(this.blob);

// var spark = new SparkMD5();

// spark.append(this.blob);

// console.log("md5值");

// console.log(spark.end());

},

cancel: () => {

this.visible = false;

this.$refs.fileBtn.value = null;

},

ok_text: "确认", // optional parameters , the default value is ok

cancel_text: "取消" // optional parameters , the default value is cancel

});

});

}

);

 

});

 

 

直接显示效果

uploadFileDirect(file) {

this.currentImg = window.URL.createObjectURL(file);

this.$vux.loading.hide();

this.blob = file;

this.upload = true;

},