So komprimieren und laden Sie ein Bild in js hoch (Code beigefügt)

<input type="file" name="file" accept="image/*" @change="selectImgs" ref="file" />

    /*
        file：文件(类型是图片格式)，
        obj：文件压缩后对象width， height， quality(0-1)
        callback：容器或者回调函数
    */
    photoCompress(file,obj,callback){
        let that=this;
        let ready=new FileReader();
        /*开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串.*/
        ready.readAsDataURL(file);
        ready.onload=function(){
            let re=this.result;
            that.canvasDataURL(re,obj,callback)  //开始压缩
        }
    },

/*利用canvas数据化图片进行压缩*/
    canvasDataURL(path, obj, callback){
        
        let img = new Image();
        img.src = path;
        img.onload = function(){
            let that = this;   //指到img
            // 默认按比例压缩
            let w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            let quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            // 创建属性节点
            let anw = document.createAttribute("width");
            anw.nodeValue = w;
            let anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            let base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    },

    /*这里转为blob*/
    convertBase64UrlToBlob(urlData){
        let arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    },