使用Express處理表單中的文件上傳

如何在Express中管理通過表單上載的文件的存儲和處理

這是HTML表單的示例,該表單允許用戶上傳文件:

<form method="POST" action="/submit-form" enctype="multipart/form-data">
  <input type="file" name="document" />
  <input type="submit" />
</form>

別忘了添加enctype="multipart/form-data"到表格,否則文件將不會上傳

當用戶按下“提交”按鈕時,瀏覽器將自動創建一個POST要求/submit-form頁面同一來源上的URL。瀏覽器發送包含的數據,但未將其編碼為常規格式application/x-www-form-urlencoded,但multipart/form-data

服務器端處理多部分數據可能很棘手且容易出錯,因此我們將使用一個稱為強大這是GitHub倉庫,它擁有4000多顆恆星,並且維護良好。

您可以使用以下方法安裝它:

npm install formidable

然後將其包含在您的Node.js文件中:

const express = require('express')
const app = express()
const formidable = require('formidable')

現在,在POST端點/submit-form路線,我們使用實例化了一個新的強大表單formidable.IncomingForm()

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm()
})

這樣做之後,我們需要能夠解析表單。我們可以通過提供回調來同步執行此操作,這意味著將處理所有文件,並且一旦完成了艱鉅的工作,便可以使它們可用:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req, (err, fields, files) => {
    if (err) {
      console.error('Error', err)
      throw err
    }
    console.log('Fields', fields)
    console.log('Files', files)
    for (const file of Object.entries(files)) {
      console.log(file)
    }
  })
})

或者,您可以使用事件而不是回調。例如,在解析每個文件或發生其他事件(例如文件處理完成,接收到非文件字段或發生錯誤)時收到通知:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('field', (name, field) => {
      console.log('Field', name, field)
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    .on('aborted', () => {
      console.error('Request aborted by the user')
    })
    .on('error', (err) => {
      console.error('Error', err)
      throw err
    })
    .on('end', () => {
      res.end()
    })
})

無論選擇哪種方式,都將獲得一個或多個Formidable.File對象,這些對象為您提供有關上載文件的信息。這些是您可以調用的一些方法:

  • file.size,文件大小(以字節為單位)
  • file.path,文件寫入的路徑
  • file.name,文件名
  • file.type,文件的MIME類型

該路徑默認為臨時文件夾,如果您偵聽該路徑,則可以修改該路徑。fileBegin事件:

app.post('/submit-form', (req, res) => {
  new formidable.IncomingForm().parse(req)
    .on('fileBegin', (name, file) => {
        file.path = __dirname + '/uploads/' + file.name
    })
    .on('file', (name, file) => {
      console.log('Uploaded file', name, file)
    })
    //...
})

免費下載我的Express.js手冊


更多速成教程: