2016-09-06 41 views
1

Multerを使用して複数の画像をアップロードしようとしています。 1つのファイルだけがアップロードされていることを除いて、すべてが正常に動作します(最後に選択されたファイル)。私はサイードの助け以下しようとした私は、私が何かを明らかに欠けている感覚を得る複数のファイルをMulterでアップロードする

HTML

<form class='new-project' action='/projects' method='POST' enctype="multipart/form-data"> 
    <label for='file'>Select your image:</label> 
    <input type='file' multiple='multiple' accept='image/*' name='uploadedImages' id='file' /> 
    <span class='hint'>Supported files: jpg, jpeg, png.</span> 
    <button type='submit'>upload</button> 
</form> 

JS

//Define where project photos will be stored 
var storage = multer.diskStorage({ 
    destination: function (request, file, callback) { 
    callback(null, './public/uploads'); 
    }, 
    filename: function (request, file, callback) { 
    console.log(file); 
    callback(null, file.originalname) 
    } 
}); 

// Function to upload project images 
var upload = multer({storage: storage}).any('uploadedImages'); 

// add new photos to the DB 
app.post('/projects', function(req, res){ 
    upload(req, res, function(err){ 
    if(err){ 
     console.log('Fucken bollocks'); 
     console.log(err); 
     return; 
    } 
    console.log(req.files); 
    res.end('Your files uploaded. Fuck yeah!!'); 
    console.log('Yep yep!'); 
    }); 
}); 

...

EDIT

コード:

HTML

<label for='file'>Select your image:</label> 
<input type='file' accept='image/*' name='uploadedImages' multiple/> 
<span class='hint'>Supported files: jpg, jpeg, png.</span> 
<input type="submit" value="uploading_img"> 

JS

multer = require('multer'), 

var upload = multer(); 

app.post('/projects', upload.array('uploadedImages', 10), function(req, res, err) { 
if (err) { 
    console.log('error'); 
    console.log(err); 
} 
var file = req.files; 
res.end(); 
console.log(req.files); 

})。

答えて

0

ここでは、この例のために行く:Multerについての詳細は

var multer = require('multer'); 
var upload = multer(); 

router.post('/projects', upload.array('uploadedImages', 10), function(req, res) { 
    var file = req.files; 
    res.end(); 
}); 

<form action="/projects" method="post" enctype="multipart/form-data"> 
    <input type="file" name="uploadedImages" value="uploading_img" multiple> 
    <input type="submit" value="uploading_img"> 
</form> 

ログイン。

+0

おかげサイード、私はちょうどこれを試してみましたし、コンソールでこのエラーを取得する:エラー '[機能:次] [{フィールド名: 'uploadedImages'、 ORIGINALNAME: 'Me.jpg'、 エンコーディング: '7ビット' 、 mimetype: 'image/jpeg'、 バッファ:<バッファff d8 ff e0 00 10 4a 46 49 46 00 01 02 00 00 01 00 01 00 00 ff fe 00 04 2a ff e2 02 1c 49 43 43 5f 50 52 4f 46 49 4c 45 00 01 01 00 00 02 0c 6c 63 ...>、 サイズ:98305}] –

+0

私の例だけを試したり、コードを適用しましたか? – Noman

+0

オリジナルの投稿にしたコードを追加しました。多かれ少なかれあなたと同じですが、うまくいきません。 –

0

私の推測では、アップロードしたいファイルごとに、あなたはreclickことです:

<input type='file' multiple='multiple' accept='image/*' name='uploadedImages' id='file' /> 

あなたがこれを行う場合は、以前選択したファイルを上書きするように、その後、選択された最後のファイルだけが、アップロードされます。

複数のファイルをアップロードするには、ファイルピッカーですべてのファイルを一度に選択する必要があります。

関連する問題