A pitfall and solution of using fileReader

var file = this.$refs.resource.files[0]
var reader = new FileReader();
// Read the file as DataURL:
reader.readAsDataURL(file);

//The callback js after reading is multi-threaded reader.onloadend=(e)=>{
}

var fileUpload = function(obj, callback){
            //Check if the browser supports the FileReader object if (typeof FileReader == "undefined") {
                alert("Your browser does not support FileReader object!");
            }
            var file = obj;
            //Judge whether the type is a picture if (!/image\/\w+/.test(file.type)){
                alert("Please make sure the file is of image type");
                return false;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image,
                    width = 95, //Image resize width quality = 0.2, //Image quality canvas = document.createElement('canvas'),
                    drawer = canvas.getContext("2d");
                img.src = this.result;
                var scale = parseInt(img.height / img.width);
                img.width=width;
                img.height = width * scale;
                canvas.width = img.width;
                canvas.height = img.height;
                drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height);
                var base64 = canvas.toDataURL('image/jpeg', 0.2);
                console.log(base64);
                var image_base64 = img.src.replace("data:image/png;base64,","");
                image_base64=encodeURIComponent(image_base64);
                alert("19")
                //Call callback callback&&callback(img.src);
            }
            reader.readAsDataURL(file);
        }

function getBase64(fileObj){
            var file = fileObj,
                cvs = document.getElementById("canvas"),
                ctx = cvs.getContext("2d");
            if(file){
                var url = window.URL.createObjectURL(file); //PS: Not compatible with IE
                var img = new Image();
                img.src = url;
                img.onload = function(){
                    ctx.clearRect(0,0,cvs.width,cvs.height);
                    cvs.width = img.width;
                    cvs.height = img.height;
                    ctx.drawImage(img,0,0,img.width,img.height);
                    var base64 = cvs.toDataURL("image/png");
                    callback(base64);
                    alert("20")
                }
            }
        }