2017-09-16 2 views
1

multer를 사용하여 클라이언트 측의 HTML 양식에서 서버 측으로 파일을 업로드하려고합니다. 멀 터 모듈은 서버 측에서 파일을 처리합니다.멀터가 파일을 업로드하지 않습니다

서버에서 200 ok 응답을 받기 때문에 모든 것이 정상이지만 파일은 내 fileSystem에 업로드해야하며 볼 수 없습니다.

이 내 HTML 양식

<template> 
    <div id="app"> 
    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data"> 
     <h2>Select a file</h2> 
     <input name="curriculum" id="inputVal" type="file"> 
     <button type="submit">Send</button> 
    </form> 
    </div> 
</template> 

내 서버 측 코드

var express = require('express'); 
var router = express.Router(); 
var path = require('path'); 
var fs = require('fs'); 
var multer = require('multer') 
var storage = multer.diskStorage({ 
    destination: function(req,file,callback) { 
    callback(null, '../files'); 
    }, 
    filename: function(req,file,callback) { 
    callback(null,Date.now() + file,callback); 
    } 

}) 
var upload = multer({ storage: storage }).single('curriculum'); 

router.post('/upload', function (req, res, next) { 
    upload(req,res, function(err){ 
    if(err) { 
     return res.status(404).send("a error ocurred"); 
    } 
    res.status(200).send("file uploaded"); 
    }); 
}); 

module.exports = 라우터; UPDATE

는 내 용액베이스 단 NPM의 multer의 사이트 (서버 측)

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

router.post('/upload',upload.single('curriculum') ,function (req, res, next) { 
    console.log(req.files); 
}); 

module.exports = 라우터를 변경;

타이!

+0

당신이 당신의 파일을 업로드하려고하는 대상 폴더로 설정 적절한 읽기/쓰기 persmission이 있습니까 ? –

+0

예, 오류가 발생하지 않습니다. 일반적으로 CORS를 얻을 수는 있지만 응용 프로그램 파일에 허용됩니다. 작동하지 않는 이유를 모르겠습니다. –

+0

파일 뒤에/'콜백 (null, '../ files /');'으로 호출하여 작동하는지 확인하십시오. –

답변

1

업로드 할 파일을 지정하지 않았습니다. input의 이름을 넣으십시오.

router.post('/upload', upload.single('curriculum'), function (req, res, next) { 
    if(err) { 
     console.log(err); 
     return res.status(404).send("a error ocurred"); 
    } 
    console.log(req.file); 
    res.status(200).send("file uploaded"); 
}); 

또한 파일 이름에 파일이 .png 또는 .jpeg 그렇지 않으면 당신은 아무것도 의미하지 않는다 바이트 코드의 무리를 볼 수와 같은 확장자로 끝나는 있는지 확인하십시오.

당신은 당신의 클라이언트가 file.originalname

cb(null, file.originalname) 

을 사용 또는 명시 적으로 추가 할 수 있습니다에 의해 당신을 제공하는 정확한 파일 이름을 얻을 수 있습니다.

callback(null, file.fieldname + '-' + Date.now() + '.png') 

file 객체이고 컴퓨터가 개체에 참석하는 데 문제가 될 수 있기 때문에이 프로그램을 도청 될 수로 callback입니다 callback(null,Date.now() + file,callback)의 세 번째 매개 변수를 제거하고 + file.originalname 같은 것으로 + file을 변경할 수 있습니다 파일 이름.

UPDATE

홈페이지 NODEJS

var express = require('express') 
var multer = require('multer') 
var app = express() 

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
    cb(null, __dirname + '/uploads')  //you tell where to upload the files, 
    }, 
    filename: function (req, file, cb) { 
    cb(null, file.fieldname + '-' + Date.now() + '.png') 
    } 
}) 

var upload = multer({storage: storage, 
    onFileUploadStart: function (file) { 
     console.log(file.originalname + ' is starting ...') 
    }, 
}); 

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

app.get('/', function(req, res, next){  
    res.render('mult'); //our html document 
}) 

app.post('/profile', upload.single('avatar'), function (req, res, next) { 
    // req.file is the `avatar` file 
    console.log(req.file); 
    return false; 
}) 

HTML 양식

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <form accept="image/x-png,image/gif,image/jpeg" enctype="multipart/form-data" action="/profile" method="post"> 
     <input type="file" name="avatar" value=""> 
     <input type="submit" name="" value="ssss"> 
    </form> 
    </body> 
</html> 
+0

안녕하세요 turmuka가 내 편집을보고 여전히 작동하지 않습니다. –

+0

안녕하세요 내 업데이트를 확인하십시오.이 코드는 저에게 잘 작동합니다. 당신의'upload' 변수 @costacosta – turmuka

+0

잘 작동하는지 알려주세요 @costacosta – turmuka

관련 문제