上传头像功能的前后端交互。

创建工程。

关于工程的创建，前面的文章中已经做过介绍，此处不再赘述。本文的操作仍需要，express和multer两个依赖项。

链接附上：https://blog.csdn.net/qq_39138295/article/details/82192124

创建完毕之后，工程项目下的文件目录截图如下图所示：

这个工程项目比前几篇文章多了一个allHeaders 的文件夹，这个文件夹是用来储存图片的，以保证后面后端给前端发送图片之用。

主要功能和起作用的位置有两点：

1.当在页面上上传图片之后，会保存到这个文件。

2.当前端需要后端给图片数据的时候，会从这个文件中读取获得。

先进入index.html前端文件，进行设置。

设置按钮操作代码如下：

</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}))

先将这几句必须的代码写好。

接着我们在后端创建文件，来保存我们上传的图片：

代码如下：

前端设置：

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>

<head>

<style>

body {

background-color: yellow;

}

</style>

</head>

<body>