上传文件时遇到问题（Express/Node、Multer）答案

【问题标题】：Trouble uploading a file (Express/Node, Multer)上传文件时遇到问题（Express/Node、Multer）
【发布时间】：2015-10-14 13:40:33
【问题描述】：

大家好，我正在使用jade生成html并在页面上有这个表单：

      p Upload New Schedule
      #uploadNew
        form(id = "form1", action="/upload", method="post", enctype="multipart/form-data")
          input(type="file", id="control")
          br
          input(type="submit" value="Upload" name="Submit")

当我选择一个文件并尝试上传时，连接超时。我究竟做错了什么？我也在使用 multer 中间件来帮助上传：

返回 app.js：

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

...

app.post('/upload', upload.single('Submit'), function(req, res) {
    if (done == true) {
        console.log(req.files);
        res.end("File uploaded");
    }
});

【问题讨论】：

你在哪里定义 done ？如果它永远不是真的，您的帖子将不会进入日志或响应。

标签： node.js express multer

【解决方案1】：

在“文件”类型的输入框中添加名称字段：

p Upload New Schedule
  #uploadNew
    form(id = "form1", action="/upload", method="post", enctype="multipart/form-data")
      input(type="file" id="control" name="control")
      br
      input(type="submit" value="Upload" name="Submit")

你没有在任何地方定义“完成”，所以我只是忽略它。
同样在 upload.single(..) 你必须传递 "file" 类型的输入字段的 name 属性（在这种情况下它是“控制”）

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

...

app.post('/upload', upload.single('control'), function(req, res) {

        console.log(req.files);
        res.end("File uploaded");

});

【讨论】：

【解决方案2】：

除了 gaurav gupta 的回答，当使用 multer 的 upload.single() 函数作为中间件时，您的文件将位于 req.file，而不是 req.files。 req.files 用于当您使用 upload.array() 或 upload.any() 时。

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

app.post('/upload', upload.single('control'), function(req, res) {
  console.log(req.file);
  res.send("File uploaded");
});

【讨论】：

【解决方案3】：

使用 multer 上传和检索多个文件（一个二进制文件，一个 JSON）的复制粘贴示例...

客户端：

<form action="" method="post" enctype="multipart/form-data"> 
    <input type="file" name="binaryFileToUpload" id="binaryFileToUpload" >
    <input type="file" name="jsonFileToUpload" id="jsonFileToUpload" >
    <input type="button" value="Upload" name="submit" onclick="upload()">
</form>
<script>
upload()
{
    let fileInput = document.getElementById("file");

    var one = fileInput.files[0]; //binary
    var two = new Blob([JSON.stringify(this.someRegularObj, null, 2)], 
    {type : 'application/json'}); //JSON

    var url = "http://localhost:4000/upload"; //your URL here
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
        alert('File(s) uploaded!');
    };
    xhr.open("POST", url, true);

    if (window.FormData) // Chrome
    {
        var formData = new FormData();
        //must match server's router.post('/receiveFiles', upload.array("upload", ...), ...
        formData.append("upload", one);
        formData.append("upload", two);

        xhr.send(formData);
    }
}
</script>

服务器端（ES6模块/类）：

defineRoutes()
{
    let upload = multer({storage: multer.memoryStorage()});

    let selector = "upload"; //must match client's formData.append() key!
    let numFiles = 2;

    router.post('/receiveFiles', upload.array(selector, numFiles),
        this.tryExtractFilesFromRequest.bind(this)
        );
}

tryExtractFilesFromRequest(req,res,next)
{
    if (req.files)
    {
        let one      = req.files[0];
        console.log(one); //instance of File, has .buffer, a binary representation

        let twoAsJsonString = Buffer.from(req.files[1].buffer, 'binary').toString('utf8');
        let two = JSON.parse(twoAsJsonString);

        res.end();
    }
}

【讨论】：