2017-09-16 9 views
1

multerを使用してクライアント側のhtml形式からサーバー側にファイルをアップロードしようとしていますが、multerモジュールはサーバー側のファイルを処理します。multerがファイルをアップロードしていません

ここからは、サーバーから200 ok応答が得られるのですべてが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

あなたのファイルの後に '/' 'callback(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のFORM

<!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

関連する問題