Question

我有一个基本的multer app在这里工作：

https://github.com/EngineeredTruth/multer

这是HTML

<html>

<head>
    <title>File upload Node.</title>
</head>

<body>
    <form id="uploadForm" enctype="multipart/form-data" action="/api/photo" method="post">
        <input type="file" name="userPhoto" multiple />
        <input type="submit" value="Upload Image" name="submit">
        <select name="carlist" form="carform">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
        </select>
        <input type="text" value="title" name="title">
        </br><span id="status"></span>
    </form>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<script>
    $(document).ready(function() {
        $('#uploadForm').submit(function() {
            $("#status").empty().text("File is uploading...");
            $(this).ajaxSubmit({
                error: function(xhr) {
                    status('Error: ' + xhr.status);
                },
                success: function(response) {
                    console.log(response)
                    $("#status").empty().text(response);
                }
            });
            return false;
        });
    });
</script>

</html>

这是Node / Express服务器

var express =   require("express");
var bodyParser =    require("body-parser");
var multer  =   require('multer');
var app =   express();
app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    if( file.mimetype === 'image/jpeg'){
      var name = Date.now() + "." + 'jpg'
    } else if (file.mimetype === 'image/png'){
      var name = Date.now() + "." + 'png'
    }
    callback(null, name);
  }
});

var limits = {
  fileSize: 10000000
}

var upload = multer({ storage : storage, limits : limits }).array('userPhoto',10)
// console.log(upload());

app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.post('/api/photo', function(req,res){
  // console.log('post request: ',req);
    upload(req,res,function(err) {
      console.log('after upload');
        //console.log(req.body);
        //console.log(req.files);
        if(err) {
            return res.end("Error uploading file: ", err);
        }
        res.end("File is uploaded");
    });
});

app.listen(3000,function(){
    console.log("Working on port 3000");
});

一切正常，用户可以上传图片。但是，我希望用户能够为照片添加标题，并通过从选择（下拉菜单）菜单中选择其中一辆汽车来选择图片中的汽车类型。

我似乎无法找到一种方法来访问＆＃39; carlist＆＃39;和＆＃39; title＆＃39;从我收到邮件请求的节点服务器。当我在console.log＆＃39; req＆＃39;时，我在任何地方都看不到carlist或title。有没有办法可以从表单后期操作中将此信息提供给我的节点服务器？

Answer 1

取自：https://github.com/expressjs/multer/issues/381

如果您的文件输入元素位于表单顶部，那么下面的每个数据在上传图像后，将其分配给req.body 你上传照片时身体仍然是空的结果..所以采取文件输入元素到表单的最底部，以便req.body将拥有来自其他输入元素的数据

所以基本上在表单底部输入文件。此外，req.body并未出现在＆＃39; / api / photo＆＃39;部分，但突然出现在＆＃39;目的地和＆＃39;文件名＆＃39;中间件，在上传功能中

MULTER：如何让用户上传照片并添加其他信息（例如姓名）以发布请求

1 个答案: