- 当前位置：首页 >IT科技 >一步一步搭建一个图片上传网站（后台服务器用nodejs）
一步一步搭建一个图片上传网站（后台服务器用nodejs）
发布时间：2025-11-05 15:30:16 来源：创站工坊 作者：应用开发
前几天看了腾讯云社区的步步一个文件上传的文章 <文件上传那些事儿> ，大体上讲了以下h5中图片上传的搭建几个核心原理，但是个图没有后端接受的服务器代码，没法做测试。片上也没有具体的传网一个实例都是一些基本的原理片段，并且ui界面也不好看，站后我就准备给那篇文章作为补充做一个图片上传网站。台服
效果如图：
点击上传后，步步会把文件放到后台一个uploads文件夹下面，搭建如果上传成功，个图那么页面会 弹出一个上传成功的片上提示框，如果上传失败，传网会弹出一个失败的站后提示框，如果网速比较慢，台服会显示出上传过程中的步步进度条。
开发准备
用普通的表单提交方法实现文件上传。
1.编写前端代码
<form action="uploadimg" method="POST" enctype="multipart/form-data"> <input type="file" name="imgfile" multiple> <input type="submit" value="提交"> </form> 设置action为提交地址， enctype="multipart/form-data" 设置提交文件表单域名为 imgfile2.编写后端测试用代码
这里我们采用了express框架，需要先安装这个框架，云服务器提供商然后使用静态中间件指定放置我们js css html 文件的目录 var app = express(); app.use(express.static(dist))下载处理上传文件的插件 multer
在readme.md文件中有基本的使用方法，我们复制过来代码实例稍微改改就可以使用了。把文件上传路径指定到uploads,然后用当前日期和文件名命名上传过来的文件。这个imgfile域名必须严格和前端表单文件域名对应起来。完整代码如下：
"use strict"; exports.__esModule = true; var express = require("express"); var multer = require("multer"); var storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, ./uploads); }, filename: function(req, file, cb) { cb(null, `${Date.now()}-${file.originalname}`) } }) var upload = multer({ storage: storage }); var app = express(); app.use(express.static(dist)); //var cpUpload = upload.fields([{ name: imgfile, maxCount: 12 }]) app.post(/uploadimg, upload.array(imgfile, 40), function(req, res, next) { var files = req.files console.log(files) if (!files[0]) { res.send(error); } else { res.send(success); } console.log(files); }) var server = app.listen(9999, localhost, function() { console.log(server is running at port 9999...); });这样选择文件，点击提交按钮后文件就被上传到了服务器uploads文件夹下
用H5和ajax技术实现无刷新文件上传
1.改造原来的选择文件按钮，让它变成一个可爱的小图标，点击后选择文件。
这个过于简单就不放代码了，具体思路是把一个a标签放上背景图片，把上传文件 input type="file" 大小设置成a标签一样大，并且放置到a标签上面，opacity设置成0透明的。点击a实际上是点击了 input type="file"
2.选取文件后生成缩略图，这个基本思路是监听 input type="file" 的onchange事件，如果选了文件就利用FileReader生成一个图片data:url添加到div.preview里面动态生成的img上，给div.preview设置成flex布局就可以灵活放置预览图了。
html
<div class="wrap"> <a href="" class="selectImg" title="上传图片"></a> <input type="file" multiple id="file"> <input type="button" value="上传" id="upload"> <div class="preview"></div> <div class="progress"> <progress max="100" value="1" item-width="100" id="progress"></progress> </div> </div>js
fileinput.onchange = () => { //console.log(dddd) var files = fileinput.files let imgDOMArray = new Array(files.length) let reader = [] let thumbPic = [] progressDOM = document.getElementById(progress-img) for (let i = 0; i < files.length; i++) { reader[i] = new FileReader() thumbPic[i] = document.createElement(div) imgDOMArray[i] = document.createElement(img) imgDOMArray[i].file = files[i] thumbPic[i].className = thumbPic thumbPic[i].appendChild(imgDOMArray[i]) previewDOM.appendChild(thumbPic[i]) reader[i].readAsDataURL(files[i]) reader[i].onload = (img => { return e =>img.src = e.target.result })(imgDOMArray[i]) } }3.点击上传按钮上传图片
这个基本思路就是IT技术网利用Formdata模拟表单，然后用ajax发送文件到服务器
var aUpload = document.querySelector(.selectImg) var button = document.querySelector(#upload) var fileinput = document.getElementById(file) button.onclick = uploadFile function uploadFile() { // console.log(ddd) var xhr = new XMLHttpRequest() var formdata = new FormData() var files = fileinput.files if (!files[0]) { alert(请先选择图片，再上传！) return } var progress = document.querySelector(progress) for (let i = 0; i < files.length; i++) { formdata.append(imgfile, files[i], files[i].name) } xhr.open(POST, /uploadimg) xhr.onload = () => { if (xhr.status === 200 && xhr.responseText === success) { previewDOM.innerHTML = xhr = null alert(图片上传成功！) } } xhr.send(formdata) xhr.upload.onprogress = e => { if (e.lengthComputable) { var progressWrap = document.querySelector(.progress) progressWrap.style.display = "flex" var percentComplete = e.loaded / e.total * 100 progress.value = percentComplete if (percentComplete >= 100) { progress.value = 0 progressWrap.style.display = "none" } } } }其中利用了xhr.upload.onprogress监听数据上传事件，并且动态设置h5进度条的value显示上传进度。如果上传完成，隐藏进度条。
如果服务器返回的是success，就弹出上传图片成功。否则弹出上传图片失败。
总结
前端利用了FileReader 的readAsDataUrl显示缩略图，利用H5 progress标签和监听xhr.upload.onprogress显示进度条。利用FormData模拟表单数据，用ajax技术提交到服务器。
后端利用express建立服务器，利用static中间件指定js css html 文件路径。用multer模块实现了解析存储通过 input typle="file" 提交的数据。
利用这个前端ajax和后端nodejs技术，我们基本上就可以做出一个图片上传存储的基本网站核心。如果数据量比较大我们就可以采用数据库存储索引搜索，不过这已经跟前端没啥关系就不展开讲了。
获取代码
- 假如你想要使用多个Linux发行版，你没有那么多的选择。你要么安装到你的物理机或虚拟机中，要么以live模式从ISO文件启动。第二个选择，对硬盘空间需求较小，只是有点麻烦，因为你需要将ISO文件写入到U盘或CD/DVD中来启动。不过，这里还有另外一个可选的折中方案：把ISO镜像放在硬盘中，然后以live模式来启动。该方案比完全安装更省空间，而且功能也完备，这对于缓慢的虚拟机而言是个不错的替代方案。下面我将介绍怎样使用流行的Grub启动加载器来实现该方案。很明显，你将需要使用到Grub，这是几乎所有现代Linux发行版都使用的。你也需要你所想用的Linux版本的ISO文件，将它下载到本地磁盘。最后，你需要知道启动分区在哪里，并怎样在Grub中描述。对于此，请使用以下命令：复制代码代码如下:# fdisk -l 带有‘*’的就是启动分区。对于我，就是/dev/sda1，用Grub语言描述就是（hd0,1)。作为参考，sda2就是(hd0,2)，sdb1就是(hd1,1)，以此类推。（你明白了吧。）我们需要编辑什么？首先，打开/etc/default/grub并检查以下行：复制代码代码如下:#GRUB_HIDDEN_TIMEOUT=0需要在此行前添加‘#’进行注释。保存，然后打开/etc/grub.d/40_custom。在该文件中，你将添加启动到ISO的参数。结构如下：复制代码代码如下: menuentry [Entrys title in the grub screen] { set isofile=[path to ISO file] loopback loop [boot partition in Grub language]$isofile [some specific] arguments }例如，假如你想要从ISO文件启动Ubuntu，那么你就是想要添加如下行到40_custom文件：复制代码代码如下:menuentry Ubuntu 14.04 (LTS) Live Desktop amd64 { set isofile=/boot/ubuntu-14.04-desktop-amd64.iso loopback loop (hd0,1)$isofile linux (loop)/casper/vmlinuz.efi boot=casper iso-scan/filename=${isofile} quiet splash initrd (loop)/casper/initrd.lz } 假如你想要启动Gparted：复制代码代码如下:menuentry GParted Live amd64 { set isofile=/boot/gparted-live-0.18.0-2-amd64.iso loopback loop (hd0,1)$isofile loopback loop $isofile linux (loop)/live/vmlinuz boot=live config union=aufs noswap noprompt ip=frommedia toram=filesystem.squashfs findiso=${isofile} initrd (loop)/live/initrd.img }或者甚至是Fedora：复制代码代码如下:menuentry Fedora 20 Live Desktop x86_64 { set isofile=/boot/Fedora-Live-Desktop-x86_64-20-1.iso loopback loop (hd0,1)$isofile loopback loop $isofile linux (loop)/isolinux/vmlinuz0 root=live:CDLABEL=Fedora-Live-Desktop-x86_64-20-1 rootfstype=auto ro rd.live.image quiet rhgb rd.luks=0 rd.md=0 rd.dm=0 iso-scan/filename=${isofile} initrd (loop)/isolinux/initrd0.img }注意，参数可根据发行版进行修改。幸运的是，有许多地方你可以查阅到。我喜欢这个发行版，但是还有很多其它的发行版你可以启动。同时，请注意你放置ISO文件的地方。假如你的家目录被加密或者无法被访问到，你可能更喜欢将这些文件放到像例子中的启动分区。但是，请首先确保启动分区有足够的空间。最后，不要忘了保存40_custom文件并使用以下命令来更新grub：复制代码代码如下: # sudo update-grub 以便在下次启动时看到修改。接下来做什么？想要更多东西？好吧，那就修改下参数来玩玩。你可以启动一个ISO文件，并让它持续做一些事情。例如，假如你是个彻头彻尾的妄想症患者，想要有个可以快速清除硬盘的选项，那么可以使用DBAN来进行一些设置。现在，真的要当心啊，因为此设置会清除你的硬盘，而且在启动时也没有恢复选项：复制代码代码如下: menuentry Dariks Boot and Nuke { set isofile=/boot/dban.iso loopback loop (hd0,1)$isofile linux (loop)/dban.bzi nuke=dwipe silent }另外一个选择复制代码代码如下:menuentry Dariks Boot and Nuke { set isofile=/boot/dban.iso loopback loop (hd0,1)$isofile linux (loop)/dban.bzi }可以显示DBAN选项，让你选择清除驱动器。当心，因为它仍然十分危险。小结一下，对于ISO文件和Grub有很多事情可做：从快速live会话到一键毁灭，都可以满足你。之后，你也可以试试启动一些针对隐私方面的发行版，如Tails。
- 对DB2 sql 存储过程基础的详细解析
- 使用SQL中SELECT语句的使用条件逻辑
- 2021年91%的英国组织遭到邮件钓鱼攻击
- 电脑XP系统DNS配置错误解决方案（解决电脑XP系统DNS配置错误的实用方法）
- 英国Monzo数字银行用户正受网络钓鱼威胁
- 云计算时代下，企业面临的五个混合云安全困境
- AirTag仍存安全隐患 山寨版可绕过Find My追踪保护功能
- 品胜5s数据线——高品质的连接选择（无缠绕、快充安全，满足你的多种需求）
- 企业安全能力整合面临七重挑战
服务器租用企商汇IT资讯网益华科技亿华云源码库香港云服务器源码下载IT技术网亿华智慧云亿华云创站工坊益强数据堂全栈开发亿华智造益华IT技术论坛益强智未来益华科技益强编程舍汇智坊思维库益强资讯优选亿华云计算运维纵横极客码头极客编程益强编程堂码力社云智核益强科技益强前沿资讯益强智囊团编程之道码上建站IT资讯网亿华科技科技前瞻亿华互联亿华灵动云站无忧技术快报益华科技
- Copyright © 2025 Powered by 一步一步搭建一个图片上传网站（后台服务器用nodejs）,创站工坊 滇ICP备2023006006号-44sitemap