js图片转base64后赋值全局变量

Question

function compress(fileObj,formData,url) {
        var reader = new FileReader();
        reader.readAsDataURL(fileObj)
        reader.onload = function(e) {
            var image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
            image.src = e.target.result    //让该标签加载base64格式的原图
            image.onload = function() {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
                var canvas = document.createElement('canvas'), //创建一个canvas元素
                context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
                imageWidth = image.width / 4,    //压缩后图片的宽度，这里设置为缩小一半
                imageHeight = image.height / 4,    //压缩后图片的高度，这里设置为缩小一半
                data = ''    //存储压缩后的图片
                canvas.width = imageWidth    //设置绘图的宽度
                canvas.height = imageHeight    //设置绘图的高度
                
                //使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
                context.drawImage(image, 0, 0, imageWidth, imageHeight);
                
                //使用toDataURL将canvas上的图片转换为base64格式
                data = canvas.toDataURL('image/jpeg');
                formData.append("imageBase64",data);
            }
        }
    }
    function checkType2() { 
        var activityTime = $('#activityTime').val(),
            activityTates = $('#activityTates').val()
            activityOther = $('#activityOther').val()
            activityDetails = $('#activityDetails').val();
        var imageFile = document.getElementById('fileUpLoad2').files[0];
        if(imageFile.size/1024 > 10250) { //大于1M，进行压缩上传
            toast("您上传的图片过大，请重新上传！")
            return;
        }
        var formData = new FormData();
        formData.append('activityTime', activityTime);
        formData.append('activityTates', activityTates);
        formData.append('activityOther', activityOther);
        formData.append('activityDetails', activityDetails);
        //formData.append('imageFile', imageFile);
        compress(imageFile,formData,"/small_front_contract/workorder/otherNetInformationCollect");
         $.ajax({
            url: "/small_front_contract/workorder/otherNetInformationCollect",
            type: "post",
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            success: function (data) {
                if (data.code == 0) {
                    toastAndRefreshToIndex("友商活动采集成功！");
                } else {
                    toast(data.msg);
                }
            },
            error: function (data) {
                toast(data.msg);
            }
        }); 
    } 

代码是这样的，在另一个点击事件方法中调用然后提交至后台(上面的checkType2方法)，现在是将图片转成base64后赋值给某全局变量，但是在提交时，全局变量还未被赋值，所以会传空值到后台，想咨询下如何将该方法改为同步方法，等赋值成功时再提交到后台，或者有没有其他方法在变量被赋值之后再进行提交，谢谢。

Answer 1

function compress(fileObj,formData,url, cb) {
  var reader = new FileReader();
  reader.readAsDataURL(fileObj)
  reader.onload = function(e) {
      var image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
      image.src = e.target.result    //让该标签加载base64格式的原图
      image.onload = function() {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
          var canvas = document.createElement('canvas'), //创建一个canvas元素
          context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
          imageWidth = image.width / 4,    //压缩后图片的宽度，这里设置为缩小一半
          imageHeight = image.height / 4,    //压缩后图片的高度，这里设置为缩小一半
          data = ''    //存储压缩后的图片
          canvas.width = imageWidth    //设置绘图的宽度
          canvas.height = imageHeight    //设置绘图的高度
          
          //使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
          context.drawImage(image, 0, 0, imageWidth, imageHeight);
          
          //使用toDataURL将canvas上的图片转换为base64格式
          data = canvas.toDataURL('image/jpeg');
          formData.append("imageBase64",data);
          cb && cb()
      }
  }
}
function checkType2() { 
  var activityTime = $('#activityTime').val(),
      activityTates = $('#activityTates').val()
      activityOther = $('#activityOther').val()
      activityDetails = $('#activityDetails').val();
  var imageFile = document.getElementById('fileUpLoad2').files[0];
  if(imageFile.size/1024 > 10250) { //大于1M，进行压缩上传
      toast("您上传的图片过大，请重新上传！")
      return;
  }
  var formData = new FormData();
  formData.append('activityTime', activityTime);
  formData.append('activityTates', activityTates);
  formData.append('activityOther', activityOther);
  formData.append('activityDetails', activityDetails);
  //formData.append('imageFile', imageFile);
  compress(imageFile,formData,"/small_front_contract/workorder/otherNetInformationCollect", function () {
      $.ajax({
        url: "/small_front_contract/workorder/otherNetInformationCollect",
        type: "post",
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        mimeType: "multipart/form-data",
        success: function (data) {
            if (data.code == 0) {
                toastAndRefreshToIndex("友商活动采集成功！");
            } else {
                toast(data.msg);
            }
        },
        error: function (data) {
            toast(data.msg);
        }
    }); 
  });
  
} 

Answer 2

async await应该也是可以的吧

Answer 3

function toImgBase64(files, callBack) {

  const { raw } = files[0];
  var reader = new FileReader();
  reader.readAsDataURL(raw); //这里传的就是base64编码格式
  reader.onload = e => {
    const { result: img64 } = reader;
    // console.log('imgBase64',img64); // 这里把图片转成base64
    if (img64 && callBack) callBack(img64);
  };
}

var fileList=[];//这里的fileList存储的是windows上传的图片信息
![图片描述][1]
toImgBase64(fileList, res => {
  console.log("imgBase64", res);
});