基于vue.js的网页端上传图片并进行图片压缩

html

<input style="display: none" type="file" ref="selectFile" @change="fileChange" accept="image/png,image/jpeg,image/jpg,image/JPEG,image/PNG,image/JPG" />

// 点击按钮触发上传文件
<el-button @click="selectFile">选择图片</el-button>

js

selectFile() {
    // vue写法触发input(file)的点击事件，选择需要上传的图片
    this.$refs.selectFile.dispatchEvent(new MouseEvent('click')) ;
}

// input(file)的change事件是选好了文件之后触发
fileChange(e) {
    // 获取上传的文件
    let files = e.target.files;
    if(0 === files.length) {
        return;
    }
    if(files[0].size >= 10485760) {
        // 提示：上传的文件大于10M，请重新选择！
         this.$refs.selectFile.value = "";
        return;
    }
    let that = this;
    let fileReader = new FileReader();
    // 将读取到的文件编码成DataURL
    fileReader.readAsDataURL(files[0]);
    // 文件读取成功时触发
    fileReader.onload = function(ev) {
        try {
            // 读取图片来获得上传图片的宽高
            let img = new Image();
            img.src = ev.target.result;
            img.onload = function (eve) {
                // 将图片绘制到canvas画布上进行压缩
                let canvas = document.createElement('canvas');
                let context = canvas.getContext('2d');
                canvas.width = img.width;
                canvas.height = img.height;
                context.clearRect(0, 0, img.width, img.height);
                context.drawImage(this, 0, 0, img.width, img.height);
                let data = "";
                // 如果图片小于0.5Mb，不进行压缩，并返回二进制流
                if (files[0].size <= 524288) {
                    data = canvas.toDataURL('image/jpeg');
                }
                // 如果图片大于0.5Mb，进行压缩，并返回二进制流
                else {
                    data = canvas.toDataURL('image/jpeg', 0.1);
                }
                // 清空选中文件，以备下一个文件上传
                that.$refs.selectFile.value = "";
            }
        } catch (e) {
            // 提示：文件格式不正确，请重新选择！
        }
    };
}