將input type改為file

multipart

multipart/form-data: 用於類型屬性設置為“file”的 <input> 元素的值。

使用multipart資料傳輸格式 ⇒ enctype="multipart/form-data"

<form enctype="multipart/form-data">
	<input type="file" name="image" />
</form>

獲取multipart表單數據

使用第三方文件muilter

https://www.npmjs.com/package/multer

npm install -d multer

引入

// app.js
const multer = require("multer");

// single(image) => 為input name
// dest => 新增位置
app.use(multer({ dest: "images" }).single(image))

// controllers/admin.js
// post
exports.postAddProduct = (req, res, next) => {
	const imageUrl = req.file;
}

dest新增路徑

diskstorage

// app.js
const storage = multer.diskStorage({
// destination => 存取位置
  destination: function (req, file, cb) {
    cb(null, 'images')
  },
// 文檔名稱
  filename: function (req, file, cb) {
		const prefix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, prefix + "-" + file.originalname);
  }
})

app.use(multer({ storage }).single("image"));

fileFilter ⇒ 過濾文件格式