Question

我正在尝试使用ajax请求将一些数据传递给我的node.js服务器。

不幸的是，我的服务器记录了一个空对象，我的ajax调用没有记录任何成功也没有记错。

以下是我的代码片段：

    var fd = new FormData();
    function appendPicture(){
      fd.append('picture_data', that.state.newFeedMediaData);
      fd.append('content', that.state.newFeedContent);
      fd.append('img_inline_style', img_inline);
    }

    var p1 = Promise.resolve(appendPicture());
    p1.then(function(v){
      console.log(fd);
      $.ajax({
        url: '/api/setNewFeedPost',
        data: fd,
        processData: false,
        contentType: false,
        enctype: 'multipart/form-data',
        type: 'POST',
        success: function(data){
          console.log("success");
        },
        error: function(data){
          console.log("error");
        }
      });
    });

img_inline_style包含以下对象：

{Filter: "grayscale(0%) brightness(100%) contrast(100%) sepia(0%)"
WebkitFilter: "grayscale(0%) brightness(100%) contrast(100%) sepia(0%)"
backgroundImage: ""
backgroundPositionY: -66
backgroundSize: "cover"
height: "100%"}

即使我的sendObj中存在错误，我也不认为这是问题，因为即使我尝试发送一些像"test"这样的简单字符串，请求也不会发生。

为什么会这样？

其他信息：

在我的node.js服务器端，我只是简单地记录接收到的数据，这些数据就像一个空对象一样打印出来

Received data: {}

我正在使用带有express的node.js，我的api文件中的ajax帖子的服务器端渲染脚本如下所示：

router.post('/setNewFeedPost', function(req, response, next){
  console.log("Set new Feedpost content: ",req.body);
});

Answer 1

在这里大胆猜测，但您可能缺少正确的中间件来处理多部分请求。可悲的是，快递可能非常令人生畏，这是其中之一。

从How to get POST a query in Express.js/Node.js?可以看出，您需要添加各种中间件来支持各种类型的请求主体。正如已经指出的那样，您需要body-parser来解析请求主体。但是，由于您使用的是multipart，因此您不能简单地依赖于body-parser。以下是他们当前README的摘录：

Node.js正文解析中间件。
由于它们复杂且通常较大，因此不处理多部分主体。

继续列出各种替代方案。其中一个是表达'自己multer。他们的README非常好，但为了完整起见，我决定将一个小例子放在一起反映你的用例：

app.js

var console = require("console");
var path = require('path');

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

var app = express();
// using path with __dirname is essential so you avoid the common pitfall of using
// relative paths, where you can never be sure if they are calculated 
// from the current working directory or the directory of the file.
var upload = multer({dest: path.join(__dirname, 'uploads')});

// upload.any() is merely used for demonstration purposes and
// I do not recommend using this in production! See their README.
app.post('/save', upload.any(), function(req, res) {
    console.log('Files', req.files);  // All files are in here.
    console.log('Body Data', req.body);  // The rest of the data here.
    // It is important to answer your client with something.
    // Otherwise the client will never know you've received anything
    // (resulting in a "pending" state and timeout errors).
    res.send('win');
});

的index.html

<form action="#">
    <input type="file" name="foo_img">
    <button type="submit">Lets go</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var img_inline_style = {
        backgroundImage: "",
        backgroundPositionY: -66,
        height: "100%"
    };

    $('form').submit(function(event) {
        event.preventDefault();

        // This is basically what you are doing, I guess.
        var data = new FormData();
        data.append('picture_data', $('input').get(0).files[0]);
        data.append('content', 'foobarbarz');
        // As correctly pointed out by Quentin's answer, you can't simply
        // send objects. You need to transform them into a string. Here
        // I'm doing this by converting the object into a string via JSON.
        data.append('img_inline_style', JSON.stringify(img_inline_style));

        $.ajax({
            url: '/save',
            data: data,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            type: 'POST',
            success: function(data){
                console.log("success");
            },
            error: function(data){
                console.log("error");
            }
         });
    });
</script>

结果

运行时，可以在服务器上观察到以下输出：

Files [ { fieldname: 'picture_data',
    originalname: 'IMG_6365.JPG',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: '/Users/luis/Desktop/test/uploads',
    filename: '743c2599a93761a347ce0951ec746927',
    path: '/Users/luis/Desktop/test/uploads/743c2599a93761a347ce0951ec746927',
    size: 1561538 } ]
Body Data { content: 'foobarbarz',
  img_inline_style: '{"backgroundImage":"","backgroundPositionY":-66,"height":"100%"}' }

正如您所看到的，我选择的文件就在那里，其余的数据也是如此。成功了！

希望这会有所帮助：）

Answer 2

sendObj内容如下所示：

content: "adasd"
img_inline_style: Object
picture_data: FormData

将表单数据对象直接传递给data: 。别把它包装在另一个元素中。您不能将普通对象传递给data:，同时告诉它不要处理它，结果不会有用。您可以将FormData对象直接传递给它，这就是如何将FormData对象与jQuery一起使用。
Append内容
我不知道img_inline是什么，但您需要将其转换为可以表示为字符串或字符串的格式。例如循环遍历每个值并附加每个值，或转换为JSON并附加

Ajax请求根本没有被触发

2 个答案:

app.js

的index.html

结果