el-upload实现图片压缩自动上传

使用了模块 image-conversion
https://github.com/WangYuLue/image-conversion

安装

npm i image-conversion --save

# or 

yarn add image-conversion

设置el-upload监听钩子before-upload

处理方法：

beforeUpload (file) {
                return this.$elUploadBeforeUpload(file);
            },

在main.js中导入模块，并将处理函数挂载到Vue

// 注意 我使用的imageConversion版本为2.1.1，需要使用下面的形式导入
import * as imageConversion from 'image-conversion';

Vue.prototype.$elUploadBeforeUpload = function(file){
    //图片大小超过4M,长度超过2000就压缩
    return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL
        let isLt2M = file.size / 1024 / 1024 > 0.5 // 判定图片大小是否小于0.5MB
        // 这里需要计算出图片的长宽
        let img = new Image()
        img.onload = function () {
            file.width = img.width // 获取到width放在了file属性上
            file.height = img.height // 获取到height放在了file属性上
            let valid = img.width > 1000 // 图片宽度大于2000
            console.log('压缩前', file)
            // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
            if (valid || isLt2M) {
                // 大小在500k以下，宽度1000以下
                imageConversion.compressAccurately(file, {
                    size: 500,
                    width: 1000 }).then(res => {
                    console.log('压缩后', res)
                    resolve(res)
                })
            } else {
                resolve(file)
            }
        } // 需要把图片赋值
        img.src = _URL.createObjectURL(file)
    })
};

参考： https://www.jianshu.com/p/c01b63a6457b