2016-12-27 17 views
0

У меня есть базовый multer приложение работает здесь:MULTER: Как позволить пользователю загрузить фотографию и добавить дополнительную информацию (например, имя), чтобы Разместить спрос

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> 

Вот сервер/Экспресс Узел

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"); 
}); 

Все работает и использование r может загрузить изображение. Тем не менее, я хочу, чтобы пользователь мог заголовок фотографии, а также выбрать тип автомобиля на картинке, выбрав один из автомобилей в меню выбора (выпадающего меню).

Я не могу найти способ доступа к «carlist» и «title» с моего узла-сервера, на который получен почтовый запрос. Когда я console.log 'req', я не вижу названия или названия в любом месте. Есть ли способ, которым я могу получить эту информацию на моем сервере узла из формы post action?

ответ

0

Взято из: https://github.com/expressjs/multer/issues/381

если ваш входной элемент файла в верхней части формы, то каждые данные ниже , назначаемого на req.body после изображения загружено в результате чего тело остается пустым, пока вы загружаете фото .. так возьмите входной элемент файла, самый нижний из вашей формы, так что req.body будет есть данные от других входных элементов

так в основном имеют входной файл в в нижней части формы. Также req.body не отображается в разделе «/ api/photo», но неожиданно появляется в промежуточном программном обеспечении «destination» и «filename», которое находится внутри функции загрузки

 Смежные вопросы

  • Нет связанных вопросов^_^