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

回答

相關問題