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

创建工程。

关于工程的创建，前面的文章中已经做过介绍，此处不再赘述。本文的操作仍需要，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