vue中图片转化base64

需求

页面

直接上代码

 //上传图片信息保存在数组中并且回显
        change(event) {
            let file = event.target.files[0];
            let windowURL = window.URL || window.webkitURL;
            //图片格式为PNG或JPG且小于5M
            if (
                /\.(jpg|jpeg|png|JPG|JPEG|PNG)$/.test(file.name) &&
                file.size < 5000000
            ) {
                if (file) {
                    let dataURl = windowURL.createObjectURL(file);
                    file.url = dataURl;
                    // this.multipartFile.push(file);
                    this.url = dataURl;
                    this.getImgBase64(dataURl);
                }
            } else {
                Toast({
                    message: "银行印鉴卡格式为PNG或JPG且小于5M",
                    position: "middle",
                    duration: 1500,
                });
            }
        },
        image2Base64(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var dataURL = canvas.toDataURL("image/jpg");
            return dataURL;
        },
        getImgBase64(src) {
            var base64 = "";
            var img = new Image();
            img.src = src;
            let that =this
            img.onload = function () {
                base64 = that.image2Base64(img);
                alert(base64);
                console.log(base64);
            };
        },