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

上傳單個文件

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

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: 'How to use express to handle file upload in node project',
  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：

• destination 就是配置文件存儲路徑的，其作用等同于之前直接往 multer() 傳入的 { dest: './uploads' }，存儲路徑通過 cb 的第二個參數(shù)傳入，cb 的第一個參數(shù)可以傳 Error 對象或直接傳 null；
• filename 就可以用來自定義文件名，因為 file.originalname 也就是上傳的文件的原來的文件名，其是帶有后綴的，所以我們在它前面加個時間戳來作為存儲時的文件名。

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

上傳多個文件

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

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

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

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

[
  {
    fieldname: 'files',
    originalname: 'How to use express to handle file upload in node project',
    encoding: '7bit',
    mimetype: 'image/png',
    destination: './uploads',
    filename: '1676958850980-How to use express to handle file upload in node project',
    path: 'uploads\\1676958850980-How to use express to handle file upload in node project',
    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-How to use express to handle file upload in node project 即可查看。

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

The above is the detailed content of How to use express to handle file upload in node project. For more information, please follow other related articles on the PHP Chinese website!