Local Image Base64转换错误Javascript

在代码和底部的错误之后，我为代码添加了一个问题。Local Image Base64转换错误Javascript

/Connect user to new socket 
var socket = io.connect(“http://localhost:3000“); 

//Waits till dom is loaded before initializing variables 
document.addEventListener(“DOMContentLoaded”, function() 
{ 
    var btn = document.getElementById(“submit”); 
    var food = document.getElementById(“food”); 
    var location = document.getElementById(“location”); 
    var deal = document.getElementById(“deal”); 
    var img = document.getElementById(“file”).files[0]; 


    btn.addEventListener(“click”, function() 
    { 

    var x = getBase64(img); 

    var foodItem = 
    { 
     name: food.value, 
     location: location.value, 
     deal: deal.value, 
     votes: 0, 
     image: x 
    }; 

     socket.emit(“addFood”, foodItem) 


    }); 
}); 

    document.getElementById(“submit”).addEventListener(“click”, function() { 

    //window.location.href = “confirmPage.html”; 
    }); 



    function getBase64(img) { 
    var reader = new FileReader(); 
    if (file) { 
     console.log(5) 
     console.log(reader.readAsDataURL); 
     reader.addEventListener(“load”, function() { 
     console.log(5) 
     return reader.readAsDataURL(img); 
    }) 
    } 
    console.log(5) 

} 


[1:01] 
html : 


[1:02] 
<html lang=“en”> 
    <head> 
     <link href=“css/createDeal.css” type=“text/css” rel=“stylesheet”>    
     <script src=“https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js“></script> 
    </head> 
    <body> 
     Food: <input type=“text” id=“food”><br> 
     Location: <input type=“text” id=“location”><br> 
     Deal: <input type=“text” id=“deal”><br> 
     Image: <input type=“file” id=“file”> 
     <button id=“submit”>Submit</button> 
     <script src=“js/createDeal.js” type=“text/javascript”></script> 
    </body> 
</html> 


[1:02] 
error: 


[1:02] 
createDeal.js:51 Uncaught TypeError: Failed to execute ‘readAsDataURL’ on ‘FileReader’: parameter 1 is not of type ‘Blob’. 
    at getBase64 (createDeal.js:51) 
    at HTMLButtonElement.<anonymous> (createDeal.js:17) 
getBase64 @ createDeal.js:51 
(anonymous) @ createDeal.js:17

我想让用户在html中使用输入文件类型上传本地图像。然后我想拍摄该图像，然后将其转换为base64并将字符串存储为对象并将其发送到服务器。但是我从readAsDataURL获取错误。

来源

2017-10-04 b3dog

您的getBase64函数返回undefined因为readAsDataURL没有回报。它读取文件，然后在您的阅读器中填入result。

我重新编写了MDN在其页面上为readAsDataURL设置的示例代码，以便您可以看到差异。

这里有一个事件和事件监听器，readAsDataURL触发读者load事件，并且在事件处理函数中，我们可以获取现在附加的base64结果。

请注意，base64字符串上仍然有一个data:image/jpeg;base64,前缀，您可能必须删除它，具体取决于将要消耗字符串的内容。 img标签将采取字符串作为，是为src和被罚款，但如果你的文件系统上存储图像和访问它的方式，前缀可能会令一些图像浏览器：

function getBase64() { 
 
    var preview = document.querySelector('img.base64'); 
 
  var textPreview= document.querySelector('div.base64'); 
 
  var file    = document.querySelector('input[type=file]').files[0]; 
 
  var reader  = new FileReader(); 
 

 
  reader.addEventListener("load", function() { 
 
    preview.src = reader.result; 
 
    textPreview.textContent = reader.result; 
 
    console.log("reader.result", reader.result); 
 
  }, false); 
 

 
  if (file) { 
 
    reader.readAsDataURL(file); 
 
  } 
 
}

<input type="file" onchange="getBase64()"><br> 
 
<img height="200" alt="image preview..." src="" class="base64" /> 
 
<div>base64:</div> 
 
<div class="base64"></div>

来源

2017-10-04 18:36:48 worc

Local Image Base64转换错误Javascript

回答

相关问题