fileReader 使用時の落とし穴と解決策

var ファイル = this.$refs.resource.files[0]
var リーダー = 新しい FileReader();
// ファイルを DataURL として読み取ります:
reader.readAsDataURL(ファイル);

// 読み取り後のコールバック js はマルチスレッドです reader.onloadend=(e)=>{
}

var fileUpload = function(obj, コールバック){
            //ブラウザがFileReaderオブジェクトをサポートしているかどうかを確認します。if (typeof FileReader == "undefined") {
                alert("お使いのブラウザはFileReaderオブジェクトをサポートしていません!");
            }
            var ファイル = obj;
            //タイプが画像かどうかを判断します if (!/image\/\w+/.test(file.type)){
                alert("ファイルが画像タイプであることを確認してください");
                false を返します。
            }
            var リーダー = 新しい FileReader();
            reader.onload = 関数 (e) {
                var img = 新しい画像、
                    width = 95, //画像のサイズ変更 width quality = 0.2, //画像の品質 canvas = document.createElement('canvas'),
                    引き出し = canvas.getContext("2d");
                結果:
                var scale = parseInt(img.height / img.width);
                幅 = 幅;
                img.height = 幅 * スケール;
                キャンバスの幅 = img の幅;
                キャンバスの高さ = img.height;
                drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height);
                var base64 = canvas.toDataURL('image/jpeg', 0.2);
                コンソールログ(base64);
                var image_base64 = img.src.replace("data:image/png;base64,","");
                image_base64=encodeURIコンポーネント(image_base64);
                警告("19")
                //コールバックを呼び出す callback&&callback(img.src);
            }
            reader.readAsDataURL(ファイル);
        }

関数 getBase64(fileObj){
            var ファイル = fileObj、
                cvs = document.getElementById("キャンバス"),
                ctx = cvs.getContext("2d");
            if(ファイル){
                var url = window.URL.createObjectURL(file); //PS: IE と互換性がありません
                var img = 新しい画像();
                url = 画像ファイル
                img.onload = 関数(){
                    ctx.clearRect(0,0,cvs.width,cvs.height);
                    cvs.width = img.width;
                    cvs.height = img.height;
                    ctx.drawImage(画像、0、0、画像の幅、画像の高さ);
                    var base64 = cvs.toDataURL("image/png");
                    コールバック(base64);
                    警告("20")
                }
            }
        }