制作base64编码图片后如何发送json格式

Question

这里我正在为 base64 转换两张图像，这一张工作正常，之后我想制作一个 json 格式，所以我正在尝试这样，但我无法得到答案。我收到类似 "message" 的错误："Uncaught ReferenceError: floor_image is not defined"， 如何解决此问题并发送 json 格式

$(document).ready(function(){
$('#submit').click(function(){

var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
  var fileToLoad = filesSelected[0];

  var fileReader = new FileReader();

  fileReader.onload = function(fileLoadedEvent) {
 var floor_image = fileLoadedEvent.target.result; // <--- data: base64
 console.log("Converted Base64 version 1 " + floor_image); // i am getting answer here
  }
  fileReader.readAsDataURL(fileToLoad);
}


var filesSelected = document.getElementById("inputFileToLoad1").files;
if (filesSelected.length > 0) {
  var fileToLoad = filesSelected[0];

  var fileReader = new FileReader();

  fileReader.onload = function(fileLoadedEvent) {
 var property_image = fileLoadedEvent.target.result; // <--- data: base64
 //console.log("Converted Base64 version 2 " + property_image);  // i am getting answer here
  }
  fileReader.readAsDataURL(fileToLoad);
}

var json = {
 "FloorImage" :floor_image,
 "PropertyImage" : property_image
}

console.log(json);


});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="idname">
<input id="inputFileToLoad" type="file" /><br><br>
<input id="inputFileToLoad1" type="file" />
<br><br><br><br>

<input type="button" value="Submit" id="submit">
</form>

Answer 1

您在全局范围内没有 floor_image。尝试在方法之外编写 var floor_image;，然后将 floor_image 设置为您的结果，但删除方法中的 var 关键字。 property_image 和 json

也是如此

像这样：

$(document).ready(function(){
  var json={FloorImage:"not loaded yet",PropertyImage:"not loaded yet"};
  var floor_image;
  var property_image;
$('#submit').click(function(){


var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
  var fileToLoad = filesSelected[0];

  var fileReader = new FileReader();

  fileReader.onload = function(fileLoadedEvent) {
 floor_image = fileLoadedEvent.target.result; 
    json.FloorImage=floor_image;
  }
  fileReader.readAsDataURL(fileToLoad);
}


var filesSelected = document.getElementById("inputFileToLoad1").files;
if (filesSelected.length > 0) {
  var fileToLoad = filesSelected[0];
  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent) {
 property_image = fileLoadedEvent.target.result;
    json.PropertyImage=property_image;
  }
  fileReader.readAsDataURL(fileToLoad);
}

console.log(json); // you are logging the json before the images are loaded, because this code is executed before the code inside onLoad.


});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="idname">
<input id="inputFileToLoad" type="file" /><br><br>
<input id="inputFileToLoad1" type="file" />
<br><br><br><br>

<input type="button" value="Submit" id="submit">
</form>

场景首先尝试加载 FloorImage，您将在 json 对象的两个属性中看到文本："not loaded yet"。然后尝试加载 PropertyImage，您将在 json-object 中看到 FloorImage 的 base64，但 PropertyImage 上的文本 "not loaded yet"。这是因为当您打印 json 对象时图像没有完成加载。然而，图像在onload-方法完成后就在那里。

Answer 2

有2个问题：

floor_image 和 property_image 在本地范围内。你应该将它们移动到 click 函数的范围
onload只是一个回调。这意味着 json 对象可能在文件加载之前创建。你应该只在之后创建它 2 onload 个调用的函数（例如，使用标志来确定 onload 调用与否，只在两者都调用时才创建 json true)

制作base64编码图片后如何发送json格式

How to send json format after make base64 encoded image

javascript

jquery

base64

json