阅读器读取图像转换为base 64后的返回结果答案

【问题标题】：Return result after reader read image convert to base 64阅读器读取图像转换为base 64后的返回结果
【发布时间】：2018-06-17 07:56:08
【问题描述】：

单击按钮后，我对功能进行了测试，图像将转换为 base64 并返回结果，但它给了我空白。为什么？

    $("#addNewProduct").click(function(){
        var uploadpImg1 = converttobase64(document.getElementById("uploadpImg1-input"));
        var uploadpImg2 = converttobase64(document.getElementById("uploadpImg2-input"));
        var uploadpImg3 = converttobase64(document.getElementById("uploadpImg3-input"));
        alert(uploadpImg1);
    });     
 function converttobase64(element) {
      var result ="";
      var file = element.files[0];

      var reader = new FileReader();

      reader.onloadend = function() {

        result = reader.result;       

      }

        reader.readAsDataURL(file);
        return result;
    }

【问题讨论】：

标签： javascript jquery base64 filereader

【解决方案1】：

这是由于图像加载（异步过程），使用回调函数修复问题

由于异步进程，即使生成 base64 图像，您也会看到始终为空字符串，

您可以做的是传递一个callback 函数，您可以在其中放置您的后代指令（您的警报） , 最后在 onloadend 上调用它，方法是将结果作为参数传递给回调函数

见下面的片段：

$("#addNewProduct").click(function() {
  var uploadpImg1 = converttobase64(document.getElementById("uploadpImg1-input"), function(result) {
    alert(result);
  });

});

function converttobase64(element, callback) {
  var result = "";
  var file = element.files[0];
  
  if (typeof(file) == 'undefined') return;

  var reader = new FileReader();

  reader.onloadend = function() {

    result = reader.result;
    callback(result);
  }

  reader.readAsDataURL(file);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="file" id="uploadpImg1-input" />

<button id="addNewProduct">add</button>

【讨论】：

@rrr_rrr 有帮助吗！