运用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
主页内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是主页</title>
</head>
<body>
<!-- form表单 -->
<!-- action="" 接口名字(前后端的连接) method方法，form表单支持两种方式POST,GET 默认是GET -->
<form action="/upload" method="POST" enctype="multipart/form-data">
<!-- input 类型 = file 文件选择器, accept接受,属性值表示接受的类型。required表示必填，name的值是后端获取的值 -->
<input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" required name="photo">
<!-- input 类型 = submit 表示点击按钮 -->
<input type="submit" value="上传图像">
</form>
</body>
</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.写前端获取照片的接口
<script>
var submit = document.querySelectorAll('input')[1]
submit.addEventListener('click', function () {
setTimeout(() => {
window.location.href = 'http://localhost:8080'
},10);
})
function getHeader() {
var xhr = new XMLHttpRequest()
xhr.open('get', '/getMyHeader')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText)
// 创建一个标签
var img = document.createElement('img')
img.style.width = '100px'
img.style.height = '100px'
img.style.border = '1px solid black'
img.src = xhr.responseText
document.body.appendChild(img)
}
}
}
// 调用函数
getHeader()
</script>
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
