一步一步搭建一个图片上传网站(后台服务器用nodejs)
前几天看了腾讯云社区的一个文件上传的文章 <文件上传那些事儿> ,大体上讲了以下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"
- 设置提交文件表单域名为 imgfile
2.编写后端测试用代码
- 这里我们采用了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.点击上传按钮上传图片
这个基本思路就是利用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技术,我们基本上就可以做出一个图片上传存储的基本网站核心。如果数据量比较大我们就可以采用数据库存储索引搜索,不过这已经跟前端没啥关系就不展开讲了。
作者:佚名
来源:51CTO
一步一步搭建一个图片上传网站(后台服务器用nodejs)相关推荐
- 一步一步搭建一个图片上传网站(后台服务器用nodejs) 1
前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试.也没有具体的一个实例都是一些基本的原理片段,并且ui界面 ...
- 用go来搭建一个简单的图片上传网站
提前说明一下:代码参考了<Go语言编程>,稍有变动, 自己亲自玩了一遍. 之前玩过go web server, 现在来用go来搭建一个简单的图片上传网站, 工作目录是:~/photoweb ...
- java图片上传保存至服务器并返回可下载的URL
java图片上传保存至服务器并返回可下载的URL 1.需求来源 2.解决思路 3.开始干活(直接上代码) 4.总结 1.需求来源 上周要做一个功能,需求是: 微信小程序开发的程序会传一张图片到后台ja ...
- uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器(H5上传-微信小程序上传)
前言 最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
- 将图片上传到FTP服务器
[FTP服务器] 介绍一个 ftp客户端工具:iis7服务器管理工具 IIs7服务器管理工具可以批量管理ftp站点,同时具备定时上传下载的功能. 作为服务器集成管理器,它最优秀的功能就是批量管 ...
- 微信图片消息 服务器故障,解决图片上传到微信服务器后无法显示问题
标签:attr ict viewport 使用 完全 example cache ber copy vue项目里可以添加到app.vue 关于referrer 在页面引 ...
- spring boot图片上传到后台功能实现,浏览器可直接访问
1. 配置上传文件最大数值 默认情况下,在spring boot嵌入的tomcat限制了上传文件的大小,在spring boot的我官方文档中说明,每个文件的最大配置为1Mb,单次请求的总文件数不能大 ...
- 微信公众号调用手机相册并将图片上传到本地服务器
最近有一个需求,用公众号调用本地相册,并将图片上传到本地服务器(不是微信服务器). 步骤一:引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq ...
- 图片上传通用后台模板
图片上传通用后台模板 后台通用方法 @RequestMapping(value = "singlefile",method= RequestMethod.POST)@Respons ...
最新文章
- Spring bean 之 FactoryBean
- Android高手进阶教程(八)之----Android Widget开发案例(世界杯倒计时!)
- java filehelper_Spring 发送邮件 使用File指定附件
- 使用jQuery Ajax功能的时候需要注意的一个问题
- 重写数组的方法(改变原数组)
- IBM AIX:Java进程大小监视
- 神经科学与“记忆印记”
- 学习笔记--asp.net页生命周期(转自msdn,仅为自己学习存储和有意读者使用)
- 1计算机组成及作用是什么,如何理解计算机组成和计算机体系结构?
- 看英文PDF利器 智器+ColorDict 辞典
- Scala下载,安装及配置
- java/php/net/python房产信息管理系统设计
- 极验验证码(6.0.9)破解(一) 之 抓包分析
- 电信 网通 铁通 DNS服务器IP地址
- Windows最值得安装的小众软件
- Phython 数据类型
- apfs扩容_MacBook Air 2015 换硬盘心得
- 计算机编程课程顺序_470道免费的在线编程和计算机科学课程,四月开始
- 微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
- 标号变迁系统(Labelled Transition System)