运用nodejs模块，需要下载nodejs(可以在菜鸟教程下载)
学习前端的我们，写一个项目之前，都先创建文件夹，我在这用的(vscode）
上传图像
1.用开发软件打开创建文件 (名字必须是英文，可以写入之后在进行修改名字，在开发过程需要用英文命名） 3在开发软件里打开终端，
[不知道可以点击查看图片](https://img-blog.csdn.net/20181010193446759?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg1MzM1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
出现下面状态：
image.png
3.在终端里面输入：npm init ，一直回车，生成package.json
image.png
image.png
4.因为我们写项目需要nodejs中的好多模块，所以需要在后端安装
1.express模块 安装express ---- npm install express
image.png
2.multer 模块 安装multer ---- npm install multer
image.png
5.在文件夹下面创建public文件夹-存放前端呈现页面，在public下面创建文件index.html,upload.html，在文件夹下面创建index.js 写后端
image.png
下面我们就开始写页面
先写主页index.html
主页内容：
这是主页
image.png
呈现的结果：
image.png
页面可能有点丑，这里主要教给大家上传图像的过程 其实呈现给人们观看的页面就这些，uoload.html我们大家也可以不需要， 如果写项目，需要多个网页，那么上传这块的内容就要写入到upload.html(当然名字是自己起的）
2.写后端 index.js
1.模块
// 先导入需要的模块
var express = require('express')
// express 模块是nodejs的http框架，他封装了nodejs模块,使创建的服务器更简单方便,
var multer = require('multer')
// multer模块,nodejs中间件,用于上传图片
var bodyParser = require('body-parser')
// 如果使用POST方法，就必须导入bodyParser,body-parser请求体解析模块，是express的中间件用于接受请求体中的数据，并解析为对象，解析之后的对象会将作为body属性添加给rep对象
var web = express()
web.use(express.static('public'))
// 设置服务器静态文件夹,里面的文件都是呈现给人们看的网页
web.use(bodyParser.urlencoded({extended:false}))
// 插入中间件 ,bodyParser.urlencoded 用来解析 request 中的body中的urlencoded字符
备注截图里面，12,14行，正确是web.use里面写错的
image.png
2：设置上传图像
// 设置随机名字
var index =Math.floor(Math.random()*100)
var fullName = ''
// 思路
// 上传内容并储存——1.设置存储的地方——2.设置存储时的名字{1.获取原来名字的后缀，2.再重新命名}
var headerConfig = multer.diskStorage({
// destination目的地
destination: 'public/headers',
// fliename 文件名 后面跟函数,函数有三个参数
// file为当前上传的图片
filename: function (req, file, callback) {
// 先获取原来图片的后缀名
// 1.选找到图片的名字,并进行分割
var nameArray = file.originalname.split('.')
// 长度是从1开始的 索引是从0开始的
// [1,2,3,4]长度4 -1 [nameArray.length - 1]索引
var type = nameArray[nameArray.length - 1]
// 新的名字 = 随机数组.照片类型
var imageName = index + '.' + type;
fullName = imageName
// 设置回调的内容,参数1：错误信息，参数2：图片新的名字
callback(null, imageName)
}
})
image.png
3.设置上传接口
// 设置使用当前的配置信息
// 上传完照片后要使用的配置信息
var upload = multer({storage:headerConfig})
// single 上传单个文件; photo 为前端上传图像的input标签的name值
// upload.single('photo')每次上传单个照片的配置信息
web.post('/upload',upload.single('photo'),function(req,res){
res.send('')
console.log('上传成功')
})
image.png
4.写前端获取照片的接口
image.png
5.后端发送照片给页面显示
web.get('/getMyHeader',function(req,res){
res.send('headers/'+ fullName)
})
image.png
最后 端口号
web.listen('8080',function(){
console.log('服务器开启..')
})
来自：https://blog.csdn.net/qq_43285335/article/details/83004649