Multer 的 req.body 有效，但 req.files 给出未定义答案

【问题标题】：Multer's req.body works but req.files gives undefinedMulter 的 req.body 有效，但 req.files 给出未定义
【发布时间】：2022-07-23 00:16:50
【问题描述】：

我正在尝试向服务器提交一个包含一些文本和图像文件的表单。关于multer，我的理解是，multer为我们的图像'my-uploads/' 创建了一个存储文件夹，我们将密钥从formData.append('imageFile', imageFile)传递给upload.single('imageFile')。我尝试给出如下路径：my-uploads/、/my-uploads、./my-uploads，但到目前为止都没有。

接下来，使用 Fetch，我已经能够将文本正文发送到服务器，它到达[Object: null prototype]....。（不确定它是否是正确的发送方式）。图像文件也没有按照预期的方式显示。 Multer 在调用 req.files 时抛出 undefined。代码哪里出错了？

html:

   <form class="blogForm" method="post" encType="multipart/form-data">
     <input type="file" class="imageInput" name="file" multiple = "true"/>
    <div class="blogEntryDiv" contenteditable="true"></div>
    <input class= "blogSubmitButton" type="submit" value="Submit" >
  </form>

   document.querySelector('.blogForm').addEventListener('submit', (e) => {

      let formData = new FormData();
      let textContent = document.querySelector('.blogEntryDiv').innerText
      let imageFile = document.querySelector('.imageInput').files
      formData.append('textcontent', textContent);
      formData.append('imageFile', imageFile);
      
      fetch(`/someimage`, {
            method: 'POST',
            body: formData
          }).then(function (res){ 
            console.log(res);
          }).then(json => console.log(json))
          .catch(err => console.log(err));

   })

app.js：

 const multer  = require('multer');


 const storage = multer.diskStorage({
    destination: function (req, file, cb) {
       cb(null, 'my-uploads/')
    },
    filename: function (req, file, cb) {
      const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
      cb(null, file.fieldname + '-' + uniqueSuffix)
    }
  })

 const upload = multer({ storage: storage })



 app.post('/someimage', upload.single('imageFile'),  (req, resp) => {
    console.log(req.body)
    console.log(req.files)//gives undefined
 })

req.body 给出：

  [Object: null prototype] {
    textcontent: '\n\nlorem lorem',
    imageFile: '[object FileList]' //gives a string
   }

【问题讨论】：

标签： node.js express multer

【解决方案1】：

formData.append('imageFile', imageFile) 不起作用，因为imageFile 是一个文件列表，但你只能追加单个文件。使用formData.append('imageFile', imageFile[0])。

此外，multer 会将单个文件写入req.file，而不是req.files。

【讨论】：