一步一步搭建一个图片上传网站(后台服务器用nodejs)

简介:

前几天看了腾讯云社区的一个文件上传的文章 <文件上传那些事儿> ,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试。也没有具体的一个实例都是一些基本的原理片段,并且ui界面也不好看,我就准备给那篇文章作为补充做一个图片上传网站。

效果如图:

一步一步搭建一个图片上传网站(后台服务器用nodejs)

点击上传后,会把文件放到后台一个uploads文件夹下面,如果上传成功,那么页面会 弹出一个上传成功的提示框,如果上传失败,会弹出一个失败的提示框,如果网速比较慢,会显示出上传过程中的进度条。

开发准备

用普通的表单提交方法实现文件上传。

1.编写前端代码

 
  1. <form action="uploadimg" method="POST" enctype="multipart/form-data"
  2.         <input type="file" name="imgfile" multiple> 
  3.         <input type="submit" value="提交"
  4.     </form> 
  • 设置action为提交地址, enctype="multipart/form-data"
  • 设置提交文件表单域名为 imgfile

2.编写后端测试用代码

  • 这里我们采用了express框架,需要先安装这个框架,然后使用静态中间件指定放置我们js css html 文件的目录
 
  1. var app = express(); 
  2. app.use(express.static('dist')) 

下载处理上传文件的插件 multer

  • 在readme.md文件中有基本的使用方法,我们复制过来代码实例稍微改改就可以使用了。把文件上传路径指定到uploads,然后用当前日期和文件名命名上传过来的文件。这个imgfile域名必须严格和前端表单文件域名对应起来。

完整代码如下:

 
  1. "use strict"
  2. exports.__esModule = true
  3. var express = require("express"); 
  4. var multer = require("multer"); 
  5. var storage = multer.diskStorage({ 
  6.     destination: function(req, file, cb) { 
  7.         cb(null'./uploads'); 
  8.     }, 
  9.     filename: function(req, file, cb) { 
  10.         cb(null, `${Date.now()}-${file.originalname}`) 
  11.     } 
  12. }) 
  13. var upload = multer({ storage: storage }); 
  14. var app = express(); 
  15. app.use(express.static('dist')); 
  16. //var cpUpload = upload.fields([{ name'imgfile', maxCount: 12 }]) 
  17. app.post('/uploadimg', upload.array('imgfile', 40), function(req, res, next) { 
  18.     var files = req.files 
  19.     console.log(files) 
  20.     if (!files[0]) { 
  21.         res.send('error'); 
  22.     } else { 
  23.         res.send('success'); 
  24.     }    
  25.     console.log(files); 
  26. }) 
  27.  
  28. var server = app.listen(9999, 'localhost'function() { 
  29.     console.log('server is running at port 9999...'); 
  30. }); 

这样选择文件,点击提交按钮后文件就被上传到了服务器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

 
  1. <div class="wrap"
  2.  
  3.         <a href="" class="selectImg" title="上传图片"></a> 
  4.         <input type="file" multiple id="file"
  5.         <input type="button" value="上传" id="upload"
  6.         <div class="preview"></div> 
  7.         <div class="progress"
  8.             <progress max="100" value="1" item-width="100" id="progress"></progress> 
  9.         </div> 
  10.     </div> 

js

 
  1. fileinput.onchange = () => { 
  2.             //console.log('dddd'
  3.             var files = fileinput.files 
  4.             let imgDOMArray = new Array(files.length) 
  5.             let reader = [] 
  6.             let thumbPic = [] 
  7.             progressDOM = document.getElementById('progress-img'
  8.             for (let i = 0; i < files.length; i++) { 
  9.                 reader[i] = new FileReader() 
  10.                 thumbPic[i] = document.createElement('div'
  11.                 imgDOMArray[i] = document.createElement('img'
  12.                 imgDOMArray[i].file = files[i] 
  13.                 thumbPic[i].className = 'thumbPic' 
  14.                 thumbPic[i].appendChild(imgDOMArray[i]) 
  15.                 previewDOM.appendChild(thumbPic[i]) 
  16.                 reader[i].readAsDataURL(files[i]) 
  17.                 reader[i].onload = (img => { 
  18.  
  19.                     return e =>img.src = e.target.result 
  20.                      
  21.                 })(imgDOMArray[i]) 
  22.  
  23.             } 
  24.         } 

3.点击上传按钮上传图片

这个基本思路就是利用Formdata模拟表单,然后用ajax发送文件到服务器

 
  1. var aUpload = document.querySelector('.selectImg'
  2.         var button = document.querySelector('#upload'
  3.         var fileinput = document.getElementById('file'
  4.         button.onclick = uploadFile 
  5.          function uploadFile() { 
  6.             //  console.log('ddd'
  7.             var xhr = new XMLHttpRequest() 
  8.             var formdata = new FormData() 
  9.  
  10.             var files = fileinput.files 
  11.             if (!files[0]) { 
  12.                 alert('请先选择图片,再上传!'
  13.                 return 
  14.             } 
  15.  
  16.             var progress = document.querySelector('progress'
  17.             for (let i = 0; i < files.length; i++) { 
  18.                 formdata.append('imgfile', files[i], files[i].name
  19.             } 
  20.             xhr.open('POST''/uploadimg'
  21.             xhr.onload = () => { 
  22.                 if (xhr.status === 200 && xhr.responseText === 'success') { 
  23.                     previewDOM.innerHTML = '' 
  24.                     xhr = null 
  25.                     alert('图片上传成功!'
  26.                 } 
  27.             } 
  28.             xhr.send(formdata) 
  29.             xhr.upload.onprogress = e => { 
  30.                 if (e.lengthComputable) { 
  31.                     var progressWrap = document.querySelector('.progress'
  32.                     progressWrap.style.display = "flex" 
  33.                     var percentComplete = e.loaded / e.total * 100 
  34.                     progress.value = percentComplete 
  35.  
  36.                     if (percentComplete >= 100) { 
  37.                         progress.value = 0 
  38.                         progressWrap.style.display = "none" 
  39.                     } 
  40.                 } 
  41.             } 
  42.  
  43.         } 

其中利用了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技术,我们基本上就可以做出一个图片上传存储的基本网站核心。如果数据量比较大我们就可以采用数据库存储索引搜索,不过这已经跟前端没啥关系就不展开讲了。


作者:佚名

来源:51CTO

相关文章
|
1月前
|
JavaScript 前端开发 安全
怎样用Node.js搭建web服务器
本文探讨了如何使用Node.js构建高效的HTTP服务器。首先,介绍了HTTP常见请求方法,如GET、POST、PUT等。接着,展示了如何使用Node.js的`http`模块创建服务器,并根据请求方法进行不同处理,如判断GET和POST请求,以及获取GET请求参数和处理POST请求数据。最后,讨论了服务器代码的模块化管理,包括路由管理和业务逻辑拆分,以提升代码的维护性和扩展性。通过本文,读者可以掌握基础的Node.js服务器开发及模块化设计技巧。
|
3天前
|
前端开发 JavaScript
【node写接口】 通过node 快速搭建一个服务器、get请求、post请求 小白入门
【node写接口】 通过node 快速搭建一个服务器、get请求、post请求 小白入门
15 4
|
21天前
|
前端开发 安全 Java
Java服务器端开发实战:利用Servlet和JSP构建动态网站
【6月更文挑战第23天】**Servlet和JSP在Java Web开发中扮演关键角色。Servlet处理业务逻辑,管理会话,JSP则结合HTML生成动态页面。两者协同工作,形成动态网站的核心。通过Servlet的doGet()方法响应请求,JSP利用嵌入式Java代码创建动态内容。实战中,Servlet处理数据后转发给JSP展示,共同构建高效、稳定的网站。虽然新技术涌现,Servlet与JSP仍为Java Web开发的基石,提供灵活且成熟的解决方案。**
|
20天前
|
弹性计算 运维 Java
解决方案测评(高效构建企业门户网站方案)基于ecs&云效&云解析DNS&VPC结合的自搭建方案报告
该文档是一个关于使用ECS、云效、云解析DNS和VPC结合的自搭建方案报告。主要内容包括前言部分,可能详细探讨了如何集成这些阿里云服务以构建自定义系统。由于提供的内容有限,具体的实施方案和细节未在摘要中体现。
170 2
|
9天前
|
JavaScript Linux 网络安全
若依修改,若依启动之后,网页端无法访问接口,宝塔和云服务器的端口都要放开,就好了,软件开发常见流程,后台端口就可以访问了
若依修改,若依启动之后,网页端无法访问接口,宝塔和云服务器的端口都要放开,就好了,软件开发常见流程,后台端口就可以访问了
|
23天前
|
数据可视化 网络协议 Linux
Linux 怎样通过win 远程桌面连接链接Linux后台服务器的可视化图形界面
Linux 怎样通过win 远程桌面连接链接Linux后台服务器的可视化图形界面
21 0
|
2月前
|
JSON JavaScript 前端开发
使用Node.js搭建服务器
使用Node.js搭建服务器
24 1
|
2月前
|
弹性计算 应用服务中间件 Shell
利用阿里云ECS搭建企业网站的教程
在本教程中,我们将指导如何使用阿里云ECS搭建企业网站。步骤包括:1) 注册阿里云账号并购买ECS实例,选择适当配置;2) 配置安全组,开放必要端口;3) 通过SSH连接ECS,更新系统并安装Nginx;4) 上传网站文件,配置Nginx服务器;5) 绑定域名并配置HTTPS证书。按照这些步骤,你的企业网站将在阿里云ECS上安全运行。
120 1
|
27天前
|
弹性计算 监控 JavaScript
云服务器 ECS产品使用问题之Node.js项目部署成功后无法通过公网IP+端口号访问,是什么导致的
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
2月前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求