【问题标题】:Why can't I access req.body with multer?为什么我不能用 multer 访问 req.body?
【发布时间】:2019-09-14 09:26:20
【问题描述】:

我的应用程序(使用 vue)允许用户将包含一些数据信息的文件上传到我的节点后端。当用户提交表单时,触发该函数:

methods: {
      buttonOK () {
        const formData = new FormData()

        formData.append('name', this.detailFirm.name)
        formData.append('description', this.detailFirm.description)
        formData.append('version', this.detailFirm.version)
        formData.append('date', this.detailFirm.date)
        formData.append('file', this.file)

        for (var [key, value] of formData.entries()) {
          console.log(key, value)
        }

        let headers = {
          'Content-Type': 'multipart/form-data',
          'Accept': 'multipart/form-data'
        }

        this.$http.put('/firmware', formData, {headers: headers})
        this.visible = false
      }

日志语句显示了它应该显示的所有内容,当发出这个请求时,chrome 开发工具中的网络选项卡会显示经过的发布数据,并且它具有应该显示的所有值:

name: test
description: test
version: 1
date: 0555-05-05
file: (binary)

我的 multer 中间件如下所示:

const multer = require('multer')
const mult = multer({
  dest: '/firmware'
})

module.exports = function (req, res, next) {
  /* --Convert multipart/form-data to useable format within express-- */
  if (req.path === '/firmware') {
    mult.single('file')
    console.log('MULTER MIDDLEWARE')
  }
  next()
}

那里的日志语句有效,让我相信 multer 正在工作。
我似乎无法在后端访问这些信息。这里我尝试了fileformData作为mult.single('')中的文件名。

这是我的控制器功能:

let firmware = {
    name: req.body.name,
    version: req.body.version,
    description: req.body.description,
    date: req.body.date,
    file: req.body.file
  }
  firmwareRepo.create(firmware, (err, create) => {
                   .............

我已经阅读了一些其他问题,并进行了一些调整,但是当我在控制器中登录 req.body 时,我总是得到一个空对象。请指教。

【问题讨论】:

    标签: node.js express vue.js multer


    【解决方案1】:

    https://github.com/expressjs/multer#diskstorage

    请注意,req.body 可能尚未完全填充。这取决于客户端向服务器传输字段和文件的顺序。

    【讨论】:

    • 我看到其他人推荐了这个,我更改了我的代码,以便最后附加文件,从而解决了其他人的问题。不幸的是,更改字段传输的顺序没有任何效果。
    【解决方案2】:

    编辑:

    首先,我记得我在前端(React)上遇到了一个问题,通过添加不需要的标题(不知何故通过添加 formdata 标题 u **** 一切),这是示例:

    data append stuff goes here 
    
    const data = new FormData()
    
    data.append('id', values.id)
    

    ......

    return async (dispatch) => {
                    const respond = await fetch('/api/postdata', {
                    method: 'post',
                    headers: {
                       //SEE? THIS IS EMPTY
                    },
                    body: data
                })
    
                // send form to backend
                dispatch(dataSend())
            }
        }
    

    第二个问题可能在后端。问题是,你不能简单地通过 req.body 访问文件信息。你需要通过req.file来访问它

      .post('/api/post', (req, res, next)=> {
        const photo = {}
        const newData = {}
    
        uploadData(req, res, (err) => {
          if(err){
            console.log('error')
          }
          else {
            Object.assign(photo, {file: req.file})
            Object.assign(newData, {newData: req.body})
    

    然后将照片传递到你想用它做某事的地方

        const addDataController = new AddDataController(req, res, next, newAdvertData, photo)
        addAdvertController.postAdvert()
      }
    })
    

    基本上我所做的是将常规数据与文件分开,并将它们进一步传递以组合并总结表格。抱歉,如果这没有帮助,无论如何你都非常接近!

    【讨论】:

      【解决方案3】:

      我不知道为什么会这样,但是当我停止使用 multer 作为导入的中间件时,一切都开始正常运行,如下所示:

      module.exports = function (req, res, next) {
        /* --Convert multipart/form-data to useable format within express-- */
        if (req.path === '/firmware') {
          mult.single('formData')
          console.log('MULTER MIDDLEWARE')
        }
        next()
      }
      

      而是直接将其应用于路由函数,如下所示:

      router.put('/firmware', upload.single('formData'), firmware.create) // doesn't work as standalone middleware
      

      如果有人知道为什么会这样,请告诉我。

      【讨论】:

      • single 是一个middleware,应该在快速路由中使用...通过在路由中使用它,您只需调用single,但不会执行它的回调。第二种方法是正确的,中间件执行并调用next,这是您的create 函数。但是仍然存在问题...如果图像不是您请求中的最后一个表单输入,req.body 可能为空...这是multer 的一个已知问题,我今天才理解原因阅读代码
      猜你喜欢
      • 2017-05-01
      • 1970-01-01
      • 2021-02-03
      • 2017-01-28
      • 1970-01-01
      • 2016-10-19
      • 1970-01-01
      • 2021-11-21
      • 1970-01-01
      相关资源
      最近更新 更多