Multerは

Question

Hey, I know this question has been asked plenty of times before, and I've tried implementing those solutions, but they don't really work for me.

I have been tearing my hair out trying to figure out how to upload a file and read the file size through Node. I initially tried using the formidable npm, which seems to no longer be maintained as I can't find documentation on it. I had no way of dealing with the errors so I tried using multer. However, I repeatedly get an undefined log when I try to log req.file.

I have the server.js code below

var express = require('express'); 
var formidable = require('formidable'); 
var multer = require('multer'); 
var path = require('path'); 
var upload = multer({dest: './uploads'}); 
var fs = require('fs'); 

var app = express(); 

var PORT = 8080; 

app.use(express.static(__dirname+'/views')); 

app.set('views', './views'); 

app.set('view engine', 'jade'); 

app.get('/', function(req, res){ 
    res.render('index.jade'); 
}); 

app.post('/upload', upload.single('Upload'),function(req, res){ 
    console.log(req.file); 
}); 

app.listen(PORT, function(){ 
    console.log('Express listening on port: '+PORT); 
}); 

My javascript code with the AJAX call is provided below

$('#upload-butt').on('change', function(){ 
     var file = $(this).get(0).files; 
     console.log(typeof file); 

     if(file.length > 0){ 
      var formData = new FormData(); 
      formData.append('Upload', file, file.name); 
      $.ajax({ 
       url: '/upload', 
       type: 'POST', 
       data:formData, 
       processData:false, 
       contentType:false, 
       error: function(jXhr, status){ 
        console.log('error: '+status); 
       }, 
       success: function(data){ 
        console.log('upload successful: '+data); 
       } 
      }) 
     } 
    }); 

My index.jade code is given below

html 
head 
    link(rel='stylesheet', href='style.css', type='text/css') 
    title Upload file for shortening 
body 
    h1 Welcome to file metadata service 
    div(id='upload-button') 
     form(enctype='multipart/form-data', method='post', action='/upload') 
      input(name='Upload', type='file', id='upload-butt') 
    div(id="submit-button") 
     form(action = '/submit') 
      button(type="submit", value='Submit', id='submit-butt') Submit 

    script(src="https://code.jquery.com/jquery-2.2.0.min.js") 
    script(src="upload.js") 

I am ready to tear my hair out, so I will be very grateful to anyone who can help me here! Thanks!

Answer 1

あなたが画像とは異なる1 <form>を提出しているが、正しい方法は、場所にあるreq.file undefinedを返しますすべてのコンテンツは単一の<form>にあります。この方法で、ファイルを含むフォームを送信します。

html 
head 
    link(rel='stylesheet', href='style.css', type='text/css') 
    title Upload file for shortening 
body 
    h1 Welcome to file metadata service 
    div(id='upload-button') 
     form(enctype='multipart/form-data', method='post', action='/upload') 
      input(name='Upload', type='file', id='upload-butt') 
      button(type="submit", value='Submit', id='submit-butt') Submit 

    script(src="https://code.jquery.com/jquery-2.2.0.min.js") 
    script(src="upload.js") 

これは、玉の部分では機能するはずです。

(docs about multer)

Answer 2

あなたは正しく中央を適用していません。

あなたはこのようなものを使用することができます：あなたは

var express = require('express'); 
var formidable = require('formidable'); 
var multer = require('multer'); 
var path = require('path'); 
var upload = multer({dest: './uploads'}); 
var fs = require('fs'); 

var app = express(); 

var PORT = 8080; 

app.use(upload); 

app.use(express.static(__dirname+'/views')); 

app.set('views', './views'); 

app.set('view engine', 'jade'); 

app.get('/', function(req, res){ 
    res.render('index.jade'); 
}); 

app.post('/upload', upload.single('Upload'),function(req, res){ 
    console.log(req.file); 
}); 

app.listen(PORT, function(){ 
    console.log('Express listening on port: '+PORT); 
});