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

 
 
 
 
  
  
  
  
var app = express(); 
  
  
  
  
app.use(express.static('dist')) 
 
 
 

 
 
 
 
  
  
  
  
"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...'); 
  
  
  
  
}); 
 
 
 

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

获取代码