通過nodejs實現文件的上傳
- 2020 年 3 月 13 日
- 筆記
通過nodejs實現文件的上傳
主要內容
本文將用來講述如何通過nodejs進行文件上傳，將會涉及到以下知識點：
- 通過express模塊進行服務器的搭建
- 通過multer模塊將上傳的文件保存到指定目錄
- 通過fs、path模塊將文件改名，添加後綴
- 進行已上傳文件的預覽
思想
前端表單->後端接收文件本身->保存到服務器上->給數據庫記錄文件的一些信息->返回給nodejs相關信息->nodejs返回前端
注意：enctype必須得是multipart/form-data
<input type=file enctype="multipart/form-data" name="fieldname">實現
multer->文件名隨機->fs模塊改名->path模塊解析磁盤路徑
本文將上傳圖片為例，下面開始詳細的設計：
將需要用到的相關模塊下載引入
該模塊可以通過npm下載，npm的下載以及相關操作這裡就不再訴說了，不是重點
npm init -y npm i express multer引入模塊
const express = require("express"); const path = require("path"); const fs = require("fs"); const multer = require("multer");服務器搭建
接下來將模塊導入，搭建服務，監聽端口
const app=express(); app.listen(8083,"localhost",()=>{ console.log("監聽8083端口成功");//監聽成功執行的回調函數 })multer實例化以及安裝該中間件
let objMulter = multer({ dest: "./public/upload" }); //實例化multer，傳遞的參數對象，dest表示上傳文件的存儲路徑 app.use(objMulter.any())//any表示任意類型的文件 // app.use(objMulter.image())//僅允許上傳圖片類型靜態資源託管
app.use(express.static("./public"));//將靜態資源託管，這樣才能在瀏覽器上直接訪問預覽圖片或則html頁面新建接口獲取發送過來的圖片
通過打印req.files可知
fieldname: 表單name名
originalname: 上傳的文件名
encoding： 編碼方式
mimetype: 文件類型
buffer: 文件本身
size：尺寸
destination: 保存路徑
filename： 保存後的文件名 不含後綴
path： 保存磁盤路徑+保存後的文件名 不含後綴
app.post("/api/reg", (req, res) => { let oldName = req.files[0].path;//獲取名字 //給新名字加上原來的後綴 let newName = req.files[0].path + path.parse(req.files[0].originalname).ext; fs.renameSync(oldName, newName);//改圖片的名字 res.send({ err: 0, url: "http://localhost:8083/upload/" + req.files[0].filename + path.parse(req.files[0].originalname).ext//該圖片的預覽路徑 }); });通過postman軟件上傳圖片檢驗
以上就是通過nodejs，簡單的圖片文件上傳流程，都是本人的學習記錄，如有不對，歡迎指出~
まだね~
完整代碼如下
const express = require("express"); const path = require("path"); const fs = require("fs"); const multer = require("multer"); const app = express(); app.listen(8083, "localhost", () => { console.log("已經監聽8083端口"); }); let objMulter = multer({ dest: "./public/upload" }); //實例化multer，傳遞的參數對象，dest表示上傳文件的存儲路徑 app.use(objMulter.any()); //any表示任意類型的文件 // app.use(objMulter.image())//僅允許上傳圖片類型 app.use(express.static("./public")); app.post("/api/reg", (req, res) => { let oldName = req.files[0].path; let newName = req.files[0].path + path.parse(req.files[0].originalname).ext; fs.renameSync(oldName, newName); res.send({ err: 0, url: "http://localhost:8083/upload/" + req.files[0].filename + path.parse(req.files[0].originalname).ext }); }); 
