Question

在代码和底部的错误后，我添加了代码的问题。

/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得到了错误。

Answer 1

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

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

此处有一个事件和事件监听器，readAsDataURL触发读者load事件，在事件处理程序中，我们可以获取现在附加的base64结果。

请注意，base64字符串上仍然有一个data:image/jpeg;base64,前缀，您可能需要删除它，具体取决于使用该字符串的内容。 img标记将该字符串原样作为src并且没问题，但是如果您将图像存储在文件系统上并以这种方式访问它，前缀可能会绊倒一些图像浏览者：

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

本地图像Base64转换错误Javascript

1 个答案: