创建工程。
关于工程的创建，前面的文章中已经做过介绍，此处不再赘述。本文的操作仍需要，express和multer两个依赖项。
链接附上：https://blog.csdn.net/qq_39138295/article/details/82192124
创建完毕之后，工程项目下的文件目录截图如下图所示：
这个工程项目比前几篇文章多了一个allHeaders 的文件夹，这个文件夹是用来储存图片的，以保证后面后端给前端发送图片之用。
主要功能和起作用的位置有两点：
1.当在页面上上传图片之后，会保存到这个文件。
2.当前端需要后端给图片数据的时候，会从这个文件中读取获得。
先进入index.html前端文件，进行设置。
设置按钮操作代码如下：
<form action="/upload" method="POST" enctype="multipart/form-data" >
<input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" required = 'required' name="photo">
<input id="sub" type="submit" value="上传头像">
</form>
此时打开浏览器：显示的界面如下：
通过上面的操作可以选择好图片，
此时我们就要对后端进行设置了，这个时候已经刚刚完成了前端的上传功能的部分按钮。
这个时候，我们进入index.js文件中：
var express = require('express')
var bodyParser = require('body-parser')
var multer = require('multer')
var web = express()
web.use(express.static('public'))
web.use(bodyParser.urlencoded({extended:false}))
先将这几句必须的代码写好。
接着我们在后端创建文件，来保存我们上传的图片：
代码如下：
前端设置：
<script>
var sub = document.getElementById('sub')
// 增加一个事件监听对象
sub.addEventListener('click',function(){
setTimeout(function(){
window.location.href = 'http://localhost:8080'
},10)
})
</script>
后端设置：
var account = 123321
var fullName = ''
// 当前配置信息不负责上传头像，上传头像由前端负责
// 当前配置信息只负责设置图片的存储路径以及设置图片的名字
var headerConfig = multer.diskStorage({
// 存储的路径
destination:'public/allHeaders',
// 设置图片的名称
filename:function(req,file,callback){
// 以.分割原始名字(验证码.png)
var name = file.originalname.split('.')
var fileType = name[name.length-1]
account++
// callback回调函数生成图片的名称需要两个值
// 值1：错误信息
// 值2：图片名称
fullName = account+'.'+fileType
callback(null,account+'.'+fileType)
}
})
// 创建一个加载配置信息的upload对象
var upload = multer({storage:headerConfig})
web.post('/upload',upload.single('photo'),function(req,res){
res.send('')
})
web.listen('8080',function(){
console.log('服务器启动......')
})
此时，我们重启服务器，重新加载网页，点击上传之后，便会看到，工程目录下的allHeaders文件夹下已经有了图片。
工程文件夹目录下的所有文件如下图所示：
这个时候我们已经把图片保存好了，接下来只需要再完成将图片在前端请求数据的时候，将这个图片发送给前端，前端接收之后，在界面上显示出来就完成了上传头像的所有功能，是不是很简单？
此时，前端对后端发送一个get请求，然后后端在接收到请求之后向前端发送图片，前端接收之后在浏览器界面显示出来。
前端设置：
function getHeader(){
var xhr = new XMLHttpRequest()
xhr.open('get','/getHeader')
xhr.send()
后端设置：
web.get('/getHeader',function(req,res){
res.send('allHeaders/'+fullName)
})
此时完成了发送数据之间的所有功能。接下来要做的工作就是在前端创建个显示图片的标签。
具体代码如下：
xhr.onreadystatechange = function(){
if(xhr.readyState == 4)
{
var headers = document.createElement('img')
headers.style.width = '200px'
headers.style.height = '200px'
headers.style.borderRadius = '50%'
headers.style.border = '10px solid white'
headers.src = xhr.responseText
document.body.appendChild(headers)
}
}
下附所有完整代码。通过本篇介绍，我们主要用到的文件，只有前端的index.html和后端的index.js两个文件：
前端所有代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上传图片</title>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" required='required' name="photo">
<input id="sub" type="submit" value="上传头像">
</form>
<script>
var sub = document.getElementById('sub')
// add增加 event时间 listenter监听者
// 增加一个事件监听对象
sub.addEventListener('click', function () {
setTimeout(function () {
window.location.href = 'http://localhost:8080'
}, 10)
})
getHeader()
function getHeader() {
var xhr = new XMLHttpRequest()
xhr.open('get', '/getHeader')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var headers = document.createElement('img')
headers.style.width = '200px'
headers.style.height = '200px'
headers.style.borderRadius = '50%'
headers.style.border = '10px solid white'
headers.src = xhr.responseText
document.body.appendChild(headers)
}
}
}
</script>
</body>
</html>
后端所有代码：
var express = require('express')
var bodyParser = require('body-parser')
var multer = require('multer')
var web = express()
web.use(express.static('public'))
web.use(bodyParser.urlencoded({extended:false}))
var account = 123321
var fullName = ''
// 当前配置信息不负责上传头像，上传头像由前端负责
// 当前配置信息只负责设置图片的存储路径以及设置图片的名字
var headerConfig = multer.diskStorage({
// 存储的路径
destination:'public/allHeaders',
// 设置图片的名称
filename:function(req,file,callback){
// 以.分割原始名字(验证码.png)
var name = file.originalname.split('.')
var fileType = name[name.length-1]
account++
// callback回调函数生成图片的名称需要两个值
// 值1：错误信息
// 值2：图片名称
fullName = account+'.'+fileType
callback(null,account+'.'+fileType)
}
})
// 创建一个加载配置信息的upload对象
var upload = multer({storage:headerConfig})
web.post('/upload',upload.single('photo'),function(req,res){
res.send('')
})
web.get('/getHeader',function(req,res){
res.send('allHeaders/'+fullName)
})
web.listen('8080',function(){
console.log('服务器启动......')
})
此时重启后端服务器，刷新浏览器界面，选择图片之后上传，然后点击上传头像按钮，得到的界面如下所示：
其他所有的上传头像的功能与此处流程基本类似。快去试试吧。