使用multer中间件没有显示req.file信息

Question

HTML文件：

...
<div id="upload-form" class="inline-block-bottom">
    <input class="upload-input form-control" name="image" type="file">
    <button id="add-newQRcode-button" type="submit" class="btn btn-info btn-sm">上传新二维
    </button>
</div>
...

JS文件：

$('#add-newQRcode-button').on('click', function(e){
    e.preventDefault();
    var formData = new FormData($("#upload-form")[0]);

    $.ajax({
        url: '/api/upload',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function (returndata) {
            console.log(returndata);
        },
        error: function (returndata) {
            console.log(returndata);
        }
    });
});

后台Express文件

...
//api/upload路由
router.post('/', function(req, res, next) {
    upload.single('image')(req, res, function(err){
        if(err){
            return
        }
        console.log("访问'api/upload'成功");
        console.log(req.file);
        res.send("这是api传回的数据");
    });
});
...

执行结果

访问'api/upload'成功
undefined

页面中选择了文件，还是不显示req.file，这是为什么？

Answer 1

formData下需要添加
formData.append('image', document.querySelector('[type=file]').files[0]);// 由于上面不会搜索到type=file的input，所以在这里将它主动添加到formData中(注意：需使用原生方式获取)