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

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

效果如图：

点击上传后，会把文件放到后台一个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