Multer 无法获取 Express 4 中的上传表单数据

Question

我正在使用 Ajax 上传表单数据。 multer(req.file, req.body) 的输出总是 undefined/{};

我的服务器代码：

import multer from 'multer';
import post from './router/api_post';

var upload = multer({dest: 'uploads/'});

app.use('/api/post', upload.single('thumb') , post);

和 api_post 路由器文件：

import express from 'express';
var router = express.Router();

router
    .post('/', (req, res, next) => {
        console.log("POST POST");
        var post = {};
        console.log(req.body);
        console.log(req.file);
    });

export default router;

req.body 的输出是 {} 和 req.fileisundefined`。

我在浏览器端使用 React 并通过 ajax:

上传数据

  savePost(ev) {
    ev.preventDefault();
    var editor = this.refs.editorDom.getDOMNode();
    var ajaxReq = new AjaxRequest();
    var formData = new FormData();
    formData.append('post_id', this.state.post_id);
    formData.append('title', this.state.title);
    formData.append('author', this.state.author);
    formData.append('digest', this.state.digest);
    formData.append('content', editor.innerHTML);
    formData.append('content_source_url', this.state.content_source_url);
    formData.append('create_time', new Date());
    formData.append('thumb', this.state.thumb);
    ajaxReq.send('post', '/api/post', ()=>{
      if(ajaxReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) {
        var result = JSON.parse(ajaxReq.getResponseText());
        if(result.ok == 1) {
          console.log("SAVE POST SUCCESS");
        }
      }
    }, '', formData);
  }

savePost() 是按钮事件侦听器的回调。我确实用强大的方式成功上传了数据。我刚刚用 multer 替换了 formidable 但无法获取它。

我没有设置 content-type 属性。我发现它在 header 是 , multipart/form-data; boundary=----WebKitFormBoundary76s9Cg74EW1B94D9

form的HTML是

<form id="edit-panel" data-reactid=".ygieokt1c0.1.0.1.0.1">
  <div id="title" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.0">
    <input type="text" class="form-control" name="title" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.0.1">
  </div>
  <div id="author" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.1">
    <input type="text" class="form-control" name="author" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.1.1">
  </div>
  <div id="thumb" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.2">
    <button class="btn btn-default" data-reactid=".ygieokt1c0.1.0.1.0.1.2.1">
      <input type="file" name="thumb" accept="image/*" data-reactid=".ygieokt1c0.1.0.1.0.1.2.1.0">
      <span data-reactid=".ygieokt1c0.1.0.1.0.1.2.1.1">UPLOAD</span>
    </button>
  </div>
  <div class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.3">
    <textarea class="form-control" name="digest" rows="5" data-reactid=".ygieokt1c0.1.0.1.0.1.3.1"></textarea>
  </div>
  <div id="rich-text-editor" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.4">
    <div id="editor-div" class="form-control" contenteditable="true" data-reactid=".ygieokt1c0.1.0.1.0.1.4.1"></div>
  </div>
  <div id="content-source-url" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.5">
    <input type="text" class="form-control" name="content_source_url" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.5.1">
  </div>
  <button class="btn btn-default" data-reactid=".ygieokt1c0.1.0.1.0.1.6">保存并提交</button>
</form>

我可以输出thumb，这是一个File{}object。

感谢您的帮助。

Answer 1

最后我发现问题是Content-Type。

我用this.request.setRequestHeader("Content-Type", postDataType);设置了Content-Type，postDataType设置为''，那么header中的实际Content-Type是, multipart/form-data; boundary=----WebKitFormBoundary76s9Cg74EW1B94D9 正如我一开始提到的。

可以看到multipar/form-data前面有一个逗号和一个space。我不知道这个逗号是从哪里来的。但无论如何，当我删除逗号和 space 时，一切正常！

Multer 无法获取 Express 4 中的上传表单数据

Multer can not get the upload form data in Express 4

form-data

express

multer