Ich erstelle eine Website, um alle Fotos meines Großvaters zu präsentieren. Da ich nicht alle Fotos habe und andere kommen und gehen werden, dachte ich, es wäre schön, eine Website zu haben, auf der sie Fotos einreichen und dann eine „Datenbank“ davon einsehen können.
Derzeit habe ich eine InfinityFree-Website und eine Github-Website. InfinityFree ist sehr gut darin, eine Webplattform mit einem großartigen Editor bereitzustellen, aber ich kann beim besten Willen nicht herausfinden, was auf der Serverseite passiert (d. h. wie Benutzer Dateien einreichen und wie sie sie anzeigen). Beide haben den gleichen Code, aber ich habe versucht, node.js zu verwenden, das auf InfinityFree nicht verfügbar ist. Deshalb habe ich es vorerst belassen und den Code nach Github verschoben.
Ich weiß nicht, wohin ich gehen soll, da keine meiner Suchanfragen sinnvolle Antworten ergeben hat. Sollte ich einen Weg gehen und lernen, wie man die Fotos erhält, speichert und dann auf der Website anzeigt?
Derzeit ist das mein Code. Es ist das Grundgerüst der Website. Jetzt wird nur noch das vom Benutzer ausgewählte Bild angezeigt.
<!doctype html>
<html>
<head>
<div class="header">
<h1>Welcome!</h1>
<p>Here is a site to view and submit photos of _________</p>
</div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
.header {
padding: 70px;
text-align: center;
background: #663399;
color: white;
position: relative;
top: -35px;
}
.header h1 {
font-size: 65px;
margin-top: 0;
position: relative;
top: 0px;
}
.header p {font-size: 25px;}
.content {padding:20px;}
</style>
</head>
<body>
<script>
function handleImageUpload()
{
var image = document.getElementById("upload").files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("display-image").src = e.target.result;
}
reader.readAsDataURL(image);
}
</script>
<input type="file" onchange="handleImageUpload()" id="upload" multiple />
<img id="display-image" src="#" alt="your image" />
</body>
</html>````
I am just struggling to see how I have not found a useful video, website, or text discussing how to do this.
It seems as though this should be well-documented and/or easy to implement.
Maybe I am just crazy. 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这是关于如何上传的指南并在 mongodb 上检索图像
那么你需要一个全栈托管平台我为你推荐Cyclic（用户友好且免费） ）
然后您上传到 MongoDb 的任何图像都会出现在您的网站上 如果您愿意，您也可以将上传表单设为单独的页面，这只是为了向您展示其工作原理
使用 firebase 的另一种方式 这里