Return reader 读取图像转换为 base 64 后的结果

Question

单击按钮后，我对这些功能进行了测试，图像将转换为 base64 和 return 结果，但它让我空白。为什么？

    $("#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;
    }

Answer 1

这是由于图像加载（异步进程）引起的，使用 callck 返回函数修复了问题

即使生成了 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>

Return reader 读取图像转换为 base 64 后的结果

Return result after reader read image convert to base 64

javascript

jquery

base64

filereader