Multer 返回 req.file 未定义

Posted 2023-02-19

【中文标题】Multer 返回 req.file 未定义

【英文标题】：Multer returning req.file undefined

【发布时间】：2017-01-15 02:18:05

【问题描述】：

我知道这个问题之前已经被问过很多次了，我也尝试过实施这些解决方案，但它们对我并不真正有用。

我一直在努力弄清楚如何上传文件并通过 Node.js 读取文件大小。我最初尝试使用强大的 npm，它似乎不再被维护，因为我找不到关于它的文档。我无法处理这些错误，所以我尝试使用 multer。但是，当我尝试记录 req.file 时，我反复得到一个未定义的日志。

下面有 server.js 代码

var express = require('express');
var formidable = require('formidable');
var multer = require('multer');
var path = require('path');
var upload = multer(dest: './uploads');
var fs = require('fs');

var app = express();

var PORT = 8080;

app.use(express.static(__dirname+'/views'));

app.set('views', './views');

app.set('view engine', 'jade');

app.get('/', function(req, res)
   res.render('index.jade'); 
);

app.post('/upload', upload.single('Upload'),function(req, res)
    console.log(req.file);
);

app.listen(PORT, function()
    console.log('Express listening on port: '+PORT);
);

下面提供了我的带有 AJAX 调用的 javascript 代码

$('#upload-butt').on('change', function()
      var file = $(this).get(0).files;
      console.log(typeof file);

      if(file.length > 0)
          var formData = new FormData();
          formData.append('Upload', file, file.name);
          $.ajax(
              url: '/upload', 
              type: 'POST',
              data:formData,
              processData:false,
              contentType:false,
              error: function(jXhr, status)
                  console.log('error: '+status);  
              ,
              success: function(data)
                  console.log('upload successful: '+data);
              
          )
      
   );

我的 index.jade 代码如下

html
head
    link(rel='stylesheet', href='style.css', type='text/css')
    title Upload file for shortening
body
    h1 Welcome to file metadata service
    div(id='upload-button')
        form(enctype='multipart/form-data', method='post', action='/upload')
            input(name='Upload', type='file', id='upload-butt')
    div(id="submit-button")
        form(action = '/submit')
            button(type="submit", value='Submit', id='submit-butt') Submit

    script(src="https://code.jquery.com/jquery-2.2.0.min.js")
    script(src="upload.js")

我已经准备好撕掉我的头发了，所以我会非常感谢任何可以在这里帮助我的人！谢谢！

【参考方案1】：

你没有正确应用中间。

你可以这样使用：

var express = require('express')
var multer  = require('multer')

var app = express()
app.use(multer( dest: './uploads/'))
You can access the fields and files in the request object:

console.log(req.body)
console.log(req.files)

所以在你的代码中同样你必须申请

var express = require('express');
var formidable = require('formidable');
var multer = require('multer');
var path = require('path');
var upload = multer(dest: './uploads');
var fs = require('fs');

var app = express();

var PORT = 8080;

app.use(upload);

app.use(express.static(__dirname+'/views'));

app.set('views', './views');

app.set('view engine', 'jade');

app.get('/', function(req, res)
   res.render('index.jade'); 
);

app.post('/upload', upload.single('Upload'),function(req, res)
    console.log(req.file);
);

app.listen(PORT, function()
    console.log('Express listening on port: '+PORT);
);

【讨论】：

这会返回以下错误 TypeError: app.use() requires middleware functions 此外，它没有在 multer 文档中提到我们需要使用 app.use() 来调用中间件的任何地方。中间件作为 get 请求方法的一部分被调用。 npmjs.com/package/multer

【参考方案2】：

您提交的<form> 与带有图片的@不同，正确的方法是将所有内容放在一个<form> 中。这样您就可以提交包含该文件的表单。

html
head
    link(rel='stylesheet', href='style.css', type='text/css')
    title Upload file for shortening
body
    h1 Welcome to file metadata service
    div(id='upload-button')
        form(enctype='multipart/form-data', method='post', action='/upload')
            input(name='Upload', type='file', id='upload-butt')
            button(type="submit", value='Submit', id='submit-butt') Submit

    script(src="https://code.jquery.com/jquery-2.2.0.min.js")
    script(src="upload.js")

这应该可以，对于玉石部分。

(docs about multer)

【讨论】：

试过了，它并没有真正产生影响，因为我根本没有使用提交按钮。本来想删掉的，但是忘记了。 req.file 仍然未定义控制台日志。

那么在这种情况下，你为什么要使用 jQuery 进行ajax 调用，按下表单提交按钮应该会立即触发有效的发布请求，对吧？

您是否从 jQuery 收到成功通知？

我不完全确定如何使提交按钮与 POST 请求交互。我的印象是无论如何您都必须发出 AJAX 请求。无论哪种方式，我都摆脱了提交按钮。

是的，我收到了来自 jQuery 的成功通知。但是回调中的数据变量只是一个读取成功的字符串。我认为 data 变量应该是包含上传文件的对象或缓冲区。