로컬 이미지 Base64 변환 오류 Javascript

아래 코드와 오류 뒤에 코드에 대한 질문이 추가되었습니다.로컬 이미지 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 함수는 을 반환합니다. readAsDataURL은 반환하지 않으므로이 함수는 undefined을 반환합니다. 파일을 읽은 다음 독자에게 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

로컬 이미지 Base64 변환 오류 Javascript

답변

관련 문제