運(yùn)用nodejs模塊，需要下載nodejs(可以在菜鳥教程下載)
學(xué)習(xí)前端的我們，寫一個(gè)項(xiàng)目之前，都先創(chuàng)建文件夾，我在這用的(vscode）
上傳圖像
1.用開(kāi)發(fā)軟件打開(kāi)創(chuàng)建文件 (名字必須是英文，可以寫入之后在進(jìn)行修改名字，在開(kāi)發(fā)過(guò)程需要用英文命名） 3在開(kāi)發(fā)軟件里打開(kāi)終端，
[不知道可以點(diǎn)擊查看圖片](https://img-blog.csdn.net/20181010193446759?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg1MzM1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
出現(xiàn)下面狀態(tài)：
image.png
3.在終端里面輸入：npm init ，一直回車，生成package.json
image.png
image.png
4.因?yàn)槲覀儗戫?xiàng)目需要nodejs中的好多模塊，所以需要在后端安裝
1.express模塊 安裝express ---- npm install express
image.png
2.multer 模塊 安裝multer ---- npm install multer
image.png
5.在文件夾下面創(chuàng)建public文件夾-存放前端呈現(xiàn)頁(yè)面，在public下面創(chuàng)建文件index.html,upload.html，在文件夾下面創(chuàng)建index.js 寫后端
image.png
下面我們就開(kāi)始寫頁(yè)面
先寫主頁(yè)index.html
主頁(yè)內(nèi)容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這是主頁(yè)</title>
</head>
<body>
<!-- form表單 -->
<!-- action="" 接口名字(前后端的連接) method方法，form表單支持兩種方式POST,GET 默認(rèn)是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 表示點(diǎn)擊按鈕 -->
<input type="submit" value="上傳圖像">
</form>
</body>
</html>
image.png
呈現(xiàn)的結(jié)果：
image.png
頁(yè)面可能有點(diǎn)丑，這里主要教給大家上傳圖像的過(guò)程 其實(shí)呈現(xiàn)給人們觀看的頁(yè)面就這些，uoload.html我們大家也可以不需要， 如果寫項(xiàng)目，需要多個(gè)網(wǎng)頁(yè)，那么上傳這塊的內(nèi)容就要寫入到upload.html(當(dāng)然名字是自己起的）
2.寫后端 index.js
1.模塊
// 先導(dǎo)入需要的模塊
var express = require('express')
// express 模塊是nodejs的http框架，他封裝了nodejs模塊,使創(chuàng)建的服務(wù)器更簡(jiǎn)單方便,
var multer = require('multer')
// multer模塊,nodejs中間件,用于上傳圖片
var bodyParser = require('body-parser')
// 如果使用POST方法，就必須導(dǎo)入bodyParser,body-parser請(qǐng)求體解析模塊，是express的中間件用于接受請(qǐng)求體中的數(shù)據(jù)，并解析為對(duì)象，解析之后的對(duì)象會(huì)將作為body屬性添加給rep對(duì)象
var web = express()
web.use(express.static('public'))
// 設(shè)置服務(wù)器靜態(tài)文件夾,里面的文件都是呈現(xiàn)給人們看的網(wǎng)頁(yè)
web.use(bodyParser.urlencoded({extended:false}))
// 插入中間件 ,bodyParser.urlencoded 用來(lái)解析 request 中的body中的urlencoded字符
備注截圖里面，12,14行，正確是web.use里面寫錯(cuò)的
image.png
2：設(shè)置上傳圖像
// 設(shè)置隨機(jī)名字
var index =Math.floor(Math.random()*100)
var fullName = ''
// 思路
// 上傳內(nèi)容并儲(chǔ)存——1.設(shè)置存儲(chǔ)的地方——2.設(shè)置存儲(chǔ)時(shí)的名字{1.獲取原來(lái)名字的后綴，2.再重新命名}
var headerConfig = multer.diskStorage({
// destination目的地
destination: 'public/headers',
// fliename 文件名 后面跟函數(shù),函數(shù)有三個(gè)參數(shù)
// file為當(dāng)前上傳的圖片
filename: function (req, file, callback) {
// 先獲取原來(lái)圖片的后綴名
// 1.選找到圖片的名字,并進(jìn)行分割
var nameArray = file.originalname.split('.')
// 長(zhǎng)度是從1開(kāi)始的 索引是從0開(kāi)始的
// [1,2,3,4]長(zhǎng)度4 -1 [nameArray.length - 1]索引
var type = nameArray[nameArray.length - 1]
// 新的名字 = 隨機(jī)數(shù)組.照片類型
var imageName = index + '.' + type;
fullName = imageName
// 設(shè)置回調(diào)的內(nèi)容,參數(shù)1：錯(cuò)誤信息，參數(shù)2：圖片新的名字
callback(null, imageName)
}
})
image.png
3.設(shè)置上傳接口
// 設(shè)置使用當(dāng)前的配置信息
// 上傳完照片后要使用的配置信息
var upload = multer({storage:headerConfig})
// single 上傳單個(gè)文件; photo 為前端上傳圖像的input標(biāo)簽的name值
// upload.single('photo')每次上傳單個(gè)照片的配置信息
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)
// 創(chuàng)建一個(gè)標(biāo)簽
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)
}
}
}
// 調(diào)用函數(shù)
getHeader()
</script>
image.png
5.后端發(fā)送照片給頁(yè)面顯示
web.get('/getMyHeader',function(req,res){
res.send('headers/'+ fullName)
})
image.png
最后 端口號(hào)
web.listen('8080',function(){
console.log('服務(wù)器開(kāi)啟..')
})
來(lái)自：https://blog.csdn.net/qq_43285335/article/details/83004649
