Express & NodeJS:从多部分表单 POST 访问响应参数



我有一个简单的表单,允许用户上传文件类型映像,并通过无线电输入选择将文件的"类别"类型附加到响应主体上。p>文件处理本身是按照后端的预期处理的 - 但是,在访问响应主体中的参数时,我将接收到不确定的参数值。谁能在我可能忽略的东西上借一些指针?

这是标记和后端脚本的示例:

    <!DOCTYPE html>
<html>
    <head>
        <script src="js/blueimp-gallery.min.js" async></script>
        <script src="js/bootstrap.min.js" async></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" async></script>
        <script src="js/script.js" async></script>
        <link rel="stylesheet" href="css/blueimp-gallery.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>

        <div id="main">
            <div class="navbar-wrapper" style="border: 12px solid black;">
                <ul>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Sign up</a></li>
                </ul>
            </div>
            <div>
                <form 
                        id              =  "uploadForm"
                        enctype         =  "multipart/form-data"
                        action          =  "/api/photo"
                        method          =  "post">
                    <input type="file" name="userPhoto" />
                    <input type="submit" value="Upload Image" name="submit">
                    <label>travel</label>
                    <input type="radio" value="travel"      name="cat">
                    <label>food</label>
                    <input type="radio" value="food"        name="cat">
                    <label>community</label>
                    <input type="radio" value="community"   name="cat">
                </form>
            </div>
    </body>
</html>



app.post('/api/photo', function(req,res){
    console.log("request to upload image recvied.. upload in progress.");
    //console.log("res.catype() = TODO " + req.get("cat"));

    // Returning undefined*
    console.log("res.catype() = " + res.cat);
    // handle file persistence to disk.
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

对于多零件式表单(带有图像之类的附加文件的表单),您需要在nodejs服务器上使用multer(或其他一些多形解析器),而不是身体parser。该链接将为您提供一个如何设置的示例。假设您的客户端html/js已正确设置,则您可以将图像作为文件提取,并将请求作为正文信息提取。

Serveride Nodejs看起来像这样:

app.post('/api/photo', upload.any(), function (req, res, next) {
    var files = req.files;
    if (files) {//Checks to see if any attached files
        files.forEach(function (file) {
            console.log('FILE');
            console.log(JSON.stringify(file));//contents of file
            console.log(JSON.stringify(file.filename));
        });
    }
    console.log(req.body);
    res.sendFile(__dirname + "/resources/JSONStructures/genericResponse.json");
});

如果您可以发布客户端JavaScript,则可以帮助确定引起问题的原因。具体来说

您应该从 req.body.cat访问 cat值,请参阅http://expressjs.com/en/4x/api.html#req.body,有关更多详细信息

不确定您是否发布了整个服务器端代码,但我没有任何提及Body-Parser中间件。您应该使用它来处理任何传入的"帖子"。而且,您应该始终在路线之前声明它们。这样,您可以使用req.body访问数据。

const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/api/photo', function(req,res){
    console.log("request to upload image recvied.. upload in progress.");
    //console.log("res.catype() = TODO " + req.get("cat"));

    // Returning undefined*
    console.log("res.catype() = " + res.cat);
    // handle file persistence to disk.
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

最新更新