今天利用node做一個(gè)文件上傳功能，
使用場(chǎng)景：這個(gè)在我們很多的應(yīng)用當(dāng)中都會(huì)遇到，比如我們注冊(cè)用戶，注冊(cè)用戶的時(shí)候都會(huì)要求上傳頭像；比如說(shuō)大家做訂單系統(tǒng)，商品有問(wèn)題、故障，訂單肯定會(huì)有退換貨功能吧，要求上傳圖片等等。
但是具體怎么操作，咋們一步一步來(lái)
1.0 安裝express模塊
$ npm install express
1.1 這里我們用到formidable模塊
（在npm包管理器中，介紹這是一個(gè)Node.js模塊，用于解析表單數(shù)據(jù)，特別是文件上傳。）
$ npm install formidable
1.2 創(chuàng)建文件一個(gè)file文件
（創(chuàng)建文件這個(gè)就不細(xì)說(shuō)了，看圖就可以）
這里主要?jiǎng)?chuàng)建了兩個(gè)文件夾public我用來(lái)放中間件和uploads用來(lái)存放圖片，以及一個(gè)app.js文件。
1.3 在public下寫(xiě)一個(gè)fileuploads.html文件
（寫(xiě)個(gè)表單，然后用ajax上傳）↓
<body>
<!-- 添加表單元素 -->
<h2>With <code>"express"</code> npm package</h2>
<form class="form">
<div>標(biāo)題: <input type="text" name="title" /></div>
<div>File: <input type="file" name="someExpressFiles" multiple="multiple" /></div>
<input type="submit" value="Upload" />
</form>
<script>
// 封裝$ 使用自調(diào)用函數(shù)，封裝$
($ = s => document.querySelector(s))()
//使用ajax發(fā)送數(shù)據(jù)
$('.form').addEventListener('submit', function (eve) {
eve.preventDefault() //阻止表單提交默認(rèn)行為
let fromData = new FormData(eve.target)
let xhr = new XMLHttpRequest
xhr.open('post', 'http://localhost:8527/public/files/student') //請(qǐng)求的地址
xhr.send(fromData) //發(fā)送請(qǐng)求攜帶formData
// 處理響應(yīng)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText)
console.log('成功：', data)
} else {
console.error('失敗')
}
}
}
})
</script>
</body>
這里用了一個(gè)普通表單，給submit提交綁定了一個(gè)事件監(jiān)聽(tīng)，因?yàn)辄c(diǎn)擊會(huì)全頁(yè)面刷新，（上傳文件不需要跳轉(zhuǎn)頁(yè)面，我這里是服務(wù)端返回一個(gè)json數(shù)據(jù)），利用formDate構(gòu)建ajax提交的數(shù)據(jù)。剩下就是一個(gè)ajax發(fā)送post請(qǐng)求，成功就返回data數(shù)據(jù)
formDate ＜
1.4 app.js
//引入模塊
const express = require('express')
const cors = require('cors')
const userFile = require('./public/files') // ! files 模塊
//調(diào)用模塊，創(chuàng)建應(yīng)用
const app = express()
app.use(cors()) //跨域問(wèn)題
app.use(express.static('public')) // ! 托管靜態(tài)資源
app.use('/public/files',userFile) //靜態(tài)路由，用use把router添加到中間件處理路徑，我們就可以在主應(yīng)用中，使用這個(gè)模塊中的路由模塊
// ! 設(shè)置監(jiān)聽(tīng) 8527 端口，到時(shí)候我們?cè)跒g覽器就訪問(wèn)這個(gè)端口
app.listen(8527,()=>console.log("server running succeed"))
先引入我們要用到的模塊
用static中間件來(lái)托管靜態(tài)文件，包括圖片、CSS 以及 JavaScript 文件（其實(shí) static() 是 Express 提供的原生中間件函數(shù)之一）
因?yàn)樯婕暗娇缬?CORS)（或通俗地譯為跨域資源共享）是一種基于 HTTP 頭的機(jī)制，該機(jī)制通過(guò)允許服務(wù)器標(biāo)示除了它自己以外的其它origin（域，協(xié)議和端口），這樣瀏覽器可以訪問(wèn)加載這些資源。
一個(gè)nodejs模塊
安裝 npm install cors
用法： const cors = require('cors')
app.use(cors())
1.5 在public下創(chuàng)建files.js文件
//引入router方法，實(shí)現(xiàn)路由模塊化
const formidable = require('formidable')
const path = require('path')
const fliesRouter = require('express').Router()
fliesRouter.post('/student',(request,response,next) => {
const form = formidable({
uploadDir: path.join(__dirname, '../uploads'), // 上傳文件放置的目錄
keepExtensions: true, //包含源文件的擴(kuò)展名
multiples: true //多個(gè)文件的倍數(shù)
})
// 從請(qǐng)求中解析提交的數(shù)據(jù)（包括文本與文件數(shù)據(jù)）
// fields 中保存的是文本數(shù)據(jù)信息
// files 中保存的是文件數(shù)據(jù)相關(guān)信息
form.parse(request, (err, fields, files) => {
if (err) {
next(err)
return
}
response.json({ //響應(yīng)json數(shù)據(jù)
code: 200,
data: { fields, files }
})
})
})
//導(dǎo)出
module.exports = fliesRouter
介紹：
首先 require() 路由模塊（files.js），然后在 Express 應(yīng)用中調(diào)用 use() 把 Router 添加到中間件處理路徑中，就可以在主應(yīng)用中使用這個(gè)模塊中的路由處理器了。
這個(gè)模塊主要是對(duì)post請(qǐng)求的處理，
uploadDir:用于放置上傳文件的目錄。以后可以使用fs.rename()來(lái)移動(dòng)它們。
keepExtensions: {boolean}默認(rèn)false ，是否包含原始文件的擴(kuò)展名
multiples:當(dāng)你調(diào)用.parse方法時(shí)，files參數(shù)(回調(diào)函數(shù)的)將包含使用HTML5 multiple屬性提交多個(gè)文件的輸入文件數(shù)組。fields參數(shù)將包含名稱以'[]'結(jié)尾的字段的值數(shù)組。
formidable npmjs有介紹
express.Router mdn也有介紹
然后我們?cè)赾md 中啟動(dòng)node 監(jiān)聽(tīng)
上傳文件到服務(wù)器到這里就完成了，哈哈哈這個(gè)圖有點(diǎn)大，將就看
