通過nodejs實現文件的上傳

主要內容

本文將用來講述如何通過nodejs進行文件上傳，將會涉及到以下知識點：

1. 通過express模塊進行服務器的搭建
2. 通過multer模塊將上傳的文件保存到指定目錄
3. 通過fs、path模塊將文件改名，添加后綴
4. 進行已上傳文件的預覽

思想

前端表單->后端接收文件本身->保存到服務器上->給數據庫記錄文件的一些信息->返回給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
  });
});