未定義のプロパティを読み取ることができません - Ajax POST

Question

私は 'アップロード'ボタンをクリックすると、mongodbにデータを保存する必要があるajaxからデータをアップロード（音楽ファイルをアップロード）しようとしています。しかし、私はフィールド名を取得し続けるは未定義です。私のコードのどこかで、データを取得していないと思います。

$('#upload').on('click', function(){ 
      var formData = new FormData($('#file')[0].files[0]); 

      $.ajax({ 
       url: 'http://localhost:3000/api/', 
       method: 'POST', 
       // data: { 
       // file: $('#file')[0].files[0] 
       // }, 
       data: formData, 
       contentType: false, 
       processData: false, 
       mimeType: "multipart/form-data", 
       success: function(data){ //if successful upon grabbing data 
       console.log(data); 
       console.log('Created music') 
       var id = $('<p>').text("Id:" + data[i]._id); 
       var title = $('<p>').text("Title:" + data[i].originalname); 
       var play = $('<button>').data('Data-id', data[i]._id).text('Play').on('click', playSong); //creates edit button with donut id and carries a function editDonut in which we will define later 

       var del = $('<button>').data('Data-id', data[i]._id).text('Delete').on('click', deleteMusic); 
       var container = $('<div>').attr('Data-id', data[i]._id); 
       $(container).append(id, title, play, del); 
       $('body').append(container) 
       // $('#new-form').hide(); 
       } 
      }) 
     }) 

index.htmlを

<form id="new-form"> 
    <input id="file" type="file" name="uploads"> 
    <button id="upload">Upload</button> 
</form> 

Expressのバックエンド - ExpressのapiRouter.js

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
    cb(null, './public/uploads/'); //UPLOAD MUSIC PATH 
    }, 
    filename: function (req, file, cb) { 
    var originalname = file.originalname; 
    var extension = originalname.split("."); 
    filename = Date.now() + '.' + extension[extension.length-1]; 
    cb(null, filename); 
    } 
}); 

router.post('/', multer({storage: storage}).single('uploads'), function(req,res){ 
    console.log(req.body); 
    var music = new Music ({ 
    fieldname: req.file.fieldname, 
    originalname: req.file.originalname, 
    encoding: req.file.encoding, 
    mimetype: req.file.mimetype, 
    destination: req.file.destination, 
    filename: req.file.filename, 
    path: './uploads/' + req.file.filename,//req.file.path, //PATH TO PLAY MUSIC 
    size: req.file.size 
    }) 
    music.save(function(err){ 
    if (err){console.log(err)} 
    else { 
     res.redirect('/'); 
    } 
    }) 
}); 

- ターミナル

に

app.use('/api', apiRouter); 

エラーをapp.js

TypeError: Cannot read property 'fieldname' of undefined 
    at /Users/will/pulse-express2-passport/config/apiRouter.js:72:24 
    at Layer.handle [as handle_request] (/Users/will/pulse-express2-passport/node_modules/express/lib/router/layer.js:95:5) 
    at next (/Users/will/pulse-express2-passport/node_modules/express/lib/router/route.js:131:13) 
    at Array.<anonymous> (/Users/will/pulse-express2-passport/node_modules/multer/lib/make-middleware.js:52:37) 
    at listener (/Users/will/pulse-express2-passport/node_modules/on-finished/index.js:169:15) 
    at onFinish (/Users/will/pulse-express2-passport/node_modules/on-finished/index.js:100:5) 
    at callback (/Users/will/pulse-express2-passport/node_modules/ee-first/index.js:55:10) 
    at IncomingMessage.onevent (/Users/will/pulse-express2-passport/node_modules/ee-first/index.js:93:5) 
    at emitNone (events.js:86:13) 
    at IncomingMessage.emit (events.js:185:7) 
    at endReadableNT (_stream_readable.js:934:12) 
    at _combinedTickCallback (internal/process/next_tick.js:74:11) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 

Answer 1

FormDataコンストラクタでは、キー（要素名）と値を抽出するフォームが必要です。ファイルの代わりにフォームをコンストラクタに渡します。

var formData = new FormData($('#new-form')[0]); 

空のFormDataオブジェクトを作成し、その値を追加することができます。

var formData = new FormData(); 
formData.append('uploads', $('#file')[0].files[0]);