關於表單提交的數據類型和後端接收文件類型中間件multer的使用

前言

<form> 標籤的屬性enctype設置以何種編碼方式提交表單數據。可選的值有三個:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

第一種：這是默認的編碼方式。它只處理表單域裏的value屬性值，採用這種編碼方式的表單會將表單域的值處理成URL方式。

第二種：這種編碼方式會以二進制流的方式來處理表單數據，這種編碼方式會把文件域指定的文件內容封裝到請求參數裏。

第三種：這種方式當表單的action屬性值爲mailto:URL的形式時比較方便，這種方式主要適用於直接經過表單發送郵件。

前端

<input type="file" name="pic"> 標籤用來提交文件。

要注意的是，這個標籤的 value值並非所選擇的文件內容，而是這個文件的完整路徑名。

正如前面所說的，表單在提交表單時，若是採用默認編碼方式，文件的內容是不會被提交的。 要提交文件內容要採用multipart/form-data編碼方式，這須要在服務器端從提交的二進制流中讀取文件內容。

後端

中間件的使用方式通常分爲兩種：

1. 使用app.use的形式
2. 在路由中做爲參數的形式使用

咱們使用express的中間件 multer 來接收上傳的文件，multer中間件是在路由中做爲參數使用的。

• multer只會解析form設置爲enctype="multipart/form-data"表單.
• multer能夠定製存儲引擎
• multer會將上傳的信息以及內容掛載到request對象上

具體的使用步驟：

第一 導入 multer 中間件

const multer  = require('multer');

第二 調用 multer

const upload = multer({dest: 'uploads/'}); //不採用這種方式

multer 接受一個 options 對象，其中最基本的是 dest 屬性，這將告訴 multer 將上傳文件保存在哪。若是你省略 options 對象，這些文件將保存在內存中，永遠不會寫入磁盤。

dest的意思是選擇一個路徑去存儲文件，可是這樣寫有一個小小的問題，存入進來的文件是沒有後綴名的。因此咱們用下面的配置項

咱們通常會使用一個配置項：

const storage = multer.diskStorage({
  // 用來配置文件上傳的位置
  destination: (req, file, cb) => {
    // 調用 cb 便可實現上傳位置的配置
    cb(null, './public/uploads');
  },
  // 用來配置上傳文件的名稱（包含後綴）
  filename: (req, file, cb) => {
    //filename 用於肯定文件夾中的文件名的肯定。 若是沒有設置 filename，每一個文件將設置爲一個隨機文件名，而且是沒有擴展名的。
    // 獲取文件的後綴
    let ext = path.extname(file.originalname);
    // 拼湊文件名
    cb(null, file.fieldname + '-' + Date.now() + ext);
  }
});

const upload = multer({storage: storage});

router.post('/uploader', upload.single('pic'), (req, res) => {
  // upload.single('pic')意思是告訴multer只接收name是pic的單個文件

  // 將上傳成功的文件信息響應給瀏覽器
  res.json(req.file);
})

重要：這裏必定要注意一個路徑問題，若是admin路由是被引入到app.js中使用的，在destination中設置路徑時，設置的是相對於app.js的。

Tips

獲取文件擴展名的方式(都是原生)

• path.parse()
• path.extname()

path.extname('index.html');
// 返回: '.html'

path.extname('index.coffee.md');
// 返回: '.md'

path.parse('/home/user/dir/file.txt');
// 返回:
// { 
//   root: '/',
//   dir: '/home/user/dir',
//   base: 'file.txt',
//   ext: '.txt',
//   name: 'file' 
// }