如何将图像转换为文件中的Base64字符串？

Question

我想选择多个图像并将它们转换为Base64字符串。我把文件推入一个数组中。我的要求是，在转换成Base64字符串后，我想将它们推送到一个数组中。我无法将图像转换为Base64字符串。

$("input[name=property_images]").change(function() { 
 
    var names = []; 
 
    for (var i = 0; i < $(this).get(0).files.length; ++i) { 
 
     names.push($(this).get(0).files[i].name); 
 
    } 
 
\t console.log(names); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<input type="file" name="property_images" multiple="multiple" />

Answer 1

改变你的函数来存储的base64值

$(document).ready(function(){ 
    $("input[name=property_images]").change(function() { 
     var imgBase64Arr = []; 
     var files = this.files; 
     for (var i = 0; i < files.length; i++) { 
     (function(i){ 
      var FR = new FileReader(); 
      FR.onload = function(e) { 
      imgBase64Arr.push(e.target.result);//adding base64 value to array 

      if(i === files.length -1)//after all files are porcessed 
       submitData(imgBase64Arr) 
      }; 
      FR.readAsDataURL(files[i]); 
     })(i); 
     } 

    }); 

    function submitData(imgBase64Arr){ 
    console.log(imgBase64Arr); 
    } 
}); 

Answer 2

下面我们就单个图像为base64字符串转换。

function readFile() { 
 
    if (this.files) { 
 
    for(i=0;i<this.files.length;i++) 
 
     { 
 
    var FR= new FileReader(); 
 
    FR.onload = function(e) { 
 
     //document.getElementById("img").src  = e.target.result; 
 
     //document.getElementById("b64").innerHTML = e.target.result; 
 
     //$("#b64").append("<div></div>").html(e.target.result); 
 
     $('<img src="'+e.target.result+'" />').appendTo('#show-image'); 
 
     $('<p>'+e.target.result+'</p>').appendTo('#text-image'); 
 
    };  
 
    FR.readAsDataURL(this.files[i]); 
 
    } 
 
    } 
 
} 
 

 
document.getElementById("inp").addEventListener("change", readFile, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="inp" type='file' multiple> 
 

 

 
<div id='show-image'></div> 
 

 
<div id='text-image'></div>