表白：黑白圣堂血天使，天劍鬼刀阿修羅。';
講解對象：/Express 實現(xiàn)圖片上傳功能小案例
作者：融水公子 rsgz
===
Express 實現(xiàn)文件上傳功能小案例
1 首先 下面這幾個包準備好npm i express npm i body-parser // 獲取請求體數(shù)據(jù) 的中間件 www.npmjs.com/package/body-parser npm i -g express-generator@4.16.1 // 應(yīng)用生成器 腳手架 npm i formidable@2.1.2 // 方便處理文件請求 npmjs.com/package/formidable2 然后呢 需要通過 命令生成應(yīng)用
會自動生成25-generator文件夾 然后 安裝項目依賴express -e 25-generator npm i // 安裝項目依賴
3 之后我們修改一下 package json里面的script node改成nodemon
4 啟動項目
這個時候可以不用 啟動項目 是一個默認的頁面沒什么好看的npm start
5 views ejs里面加上一個portrait.ejs<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上傳</title> </head> <body> <h2>文件上傳</h2> <hr /> <!-- 文件上傳的必須屬性 --> <form action="/portrait" method="post" enctype="multipart/form-data"> 用戶名:<input type="text" name="username"/> <br /> 頭像:<input type="file" name="portrait"/> <button>提交</button> <input type="submit" value="Upload" /> </form> </body> </html>
最主要演示的就是文件上傳功能form表單 post請求就夠用了
6 index.js 里面添加formidable 處理圖片的邏輯
主要是 引入formidable包，創(chuàng)建一個form對象，通過form.parse解析請求報文
uploadDir 設(shè)置靜態(tài)文件的保存目錄
keepExtensions 保持文件后綴// formidable 處理post請求 router.post('/portrait', (req, res, next)=>{ // 創(chuàng)建表單對象 const form = formidable({ multiples:true, // 設(shè)置靜態(tài)文件的保存目錄 uploadDir:__dirname+'/../public/images', // 保持文件后綴 keepExtensions:true, }); // 解析請求報文 form.parse(req, (err, fields, files) => { if (err) { next(err); return; } // res.json({ fields, files }); /** * fields 對象 存儲鍵值對 存儲那些 一般字段 text radio checkbox salect * files 存儲的都是 file 數(shù)據(jù) */ // res.send('收到了!'); let url = '/images/'+files.portrait.newFilename; // /images/41273eea56ed67ff84cc70200.png res.send(url); }); });
上面的邏輯部分處理好之后呢
運行項目npm start瀏覽器訪問這個地址 就是發(fā)送一個get請求，會渲染一個portrait.ejs 頁面
里面填寫好信息 上傳好圖片之后，點擊提交的時候 就是發(fā)送一個post請求
結(jié)果會res.send(url)響應(yīng)一個 圖片的拼接地址
===公眾號：不浪仙人謝謝大家的支持！可以點擊我的頭像，進入我的空間瀏覽更多文章呢。建議大家360doc[www.360doc.com]注冊一個賬號登錄，里面真的有很多優(yōu)秀的文章，歡迎大家的到來。
---
