ローカルイメージ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には返品がありません。ファイルを読み取って、リーダーに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

答えて

関連する問題