在代码和底部的错误之后，我为代码添加了一个问题。
/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得到错误。
最佳答案
您的getBase64函数返回undefined，因为readAsDataURL没有返回值。它读取文件，然后在阅读器中填充result。
我重新整理了MDN在其页面上的readAsDataURL示例代码，因此您可以看到其中的区别。
这里有一个事件和事件侦听器，readAsDataURL触发读者load事件，并且在事件处理程序中，我们可以获取现在附加的base64结果。
请注意，base64字符串上仍然有一个标记会将字符串原样地用作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>关于html - 本地镜像Base64转换错误Javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46571406/