怎么處理文件上傳？下面本篇文章給大家介紹一下node項目中如何使用express來處理文件的上傳，希望對大家有所幫助！

上傳單個文件

我們可以使用 express 官方出品的第三方中間件 multer 來處理，先是安裝：

(相關(guān)資料圖)

npm i multer

然后我先放段比較完整的代碼，之后解釋：

const express = require("express")const multer = require("multer")const app = express()const upload = multer({ dest: "./uploads" })app.post("/upload", upload.single("file"), (req, res) => {  console.log(req.file)  res.end("上傳成功")})app.listen(4396, () => {  console.log("服務(wù)器開啟")})

引入后的 multer為一個函數(shù)，執(zhí)行它得到 upload對象，執(zhí)行時可以傳入配置，比如設(shè)置 dest(destination 的縮寫） 為 "./uploads"，用于指定上傳后的文件的存放位置： 【相關(guān)教程推薦：nodejs視頻教程、編程教學(xué)】

const upload = multer({ dest: "./uploads" })

由于對上傳文件的處理并不是普遍需要的，所以對 upload的使用是直接在匹配上傳路徑（我們定義為 "/upload"）和方法（一般為 POST）的 app.post("/upload", )內(nèi)，處理的是單個文件上傳，所以使用 upload.single()方法，傳入的 "file"（自定義，也可以為其它名字） 為上傳文件時的 key：

其執(zhí)行會返回一個中間件函數(shù)，將得到的文件的數(shù)據(jù)賦值到 req.file，而文本字段的信息則會放在 req.body中，并調(diào)用 next()，這樣我們就可以接著注冊一個中間件，打印查看文件信息，并向客戶端返回請求結(jié)果 ：

app.post("/upload", upload.single("file"), (req, res) => {  console.log(req.body)  console.log(req.file)  res.end("上傳成功")})

發(fā)起上傳請求后，打印得到的 req.body如下：

[Object: null prototype] { name: "jay" }

注意，如果請求的 body 使用 form-data格式攜帶的數(shù)據(jù)里沒有文件，而僅僅是一些文本字段，則 upload.single("file")可以換成 upload.any()。

打印得到的 req.file如下：

{  fieldname: "file",  originalname: "1.png",  encoding: "7bit",  mimetype: "image/png",  destination: "./uploads",  filename: "4c5781db70269d90cc57249e95a28894",  path: "uploads\\4c5781db70269d90cc57249e95a28894",  size: 904454}

并且文件會存儲在 uploads 目錄下：

可以看到，文件名為哈希值，且沒有后綴，在 vscode 里無法直接查看圖片：

但圖片文件是可用的，使用 ps 是可以直接打開查看的。那如果想讓文件存儲時的文件名是添加后綴的，要怎么辦呢？解決方案是在執(zhí)行 const upload = multer()時，傳入的配置對象不再設(shè)置 dest的值而改為設(shè)置 storage：

const storage = multer.diskStorage({  destination(req, file, cb) {    cb(null, "./uploads")  },  filename(req, file, cb) {    cb(null, Date.now() + "-" + file.originalname)  }})const upload = multer({ storage })

storage對象由 multer.diskStorage()生成，其內(nèi)部傳入對象，該對象有兩個方法屬性，它們都有 3 個參數(shù)，請求對象 req，文件信息 file，和一個回調(diào)函數(shù) cb：

現(xiàn)在再次發(fā)送上傳文件請求，存儲到 uploads 目錄下的文件就有帶后綴名了，可以直接在 vscode 打開查看：

上傳多個文件

如果請求一次性上傳多個文件，則只需要將 upload.single("file")替換為 upload.array("files", 3)即可，傳入?yún)?shù)意為上傳時文件的 key 為 files（自定義的，也可以是其它名字），并且限制最多上傳 3 張圖片，得到的文件信息可以在下一個中間件函數(shù)的 req.files獲?。?/p>

app.post("/upload", upload.array("files", 3), (req, res) => {  console.log(req.files)  res.end("上傳成功")})

當(dāng)我們一次上傳多個文件時：

打印 req.files得到的就是個數(shù)組了：

[  {    fieldname: "files",    originalname: "1.png",    encoding: "7bit",    mimetype: "image/png",    destination: "./uploads",    filename: "1676958850980-1.png",    path: "uploads\\1676958850980-1.png",    size: 904454  },  {    fieldname: "files",    originalname: "qrcode.png",    encoding: "7bit",    mimetype: "image/png",    destination: "./uploads",    filename: "1676958850986-qrcode.png",    path: "uploads\\1676958850986-qrcode.png",    size: 1076  }]

將文件部署為靜態(tài)資源

可以使用內(nèi)置的 express.static("./uploads")中間件函數(shù)將存儲上傳文件的 uploads 目錄設(shè)置為靜態(tài)資源。然后傳給 app.use()：

app.use(express.static("./uploads"))

這樣我們就可以直接通過瀏覽器查看上傳得到的文件了，比如 uploads 有張圖片如下：

只需要在瀏覽器輸入 localhost:4396/1677031777791-1.png 即可查看。

更多node相關(guān)知識，請訪問：nodejs 教程！

以上就是node項目中如何使用express來處理文件的上傳的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞：