使用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手册


更多速成教程: