2017-09-16 11 views
0

ドキュメントにアップロードイメージを作成し、MongoDBへのパスを保存しました。イメージの取得中に、アップロード中の現在のイメージのみが表示されます。私はデータベースにアップロードされたすべての画像を表示したい。データベースからすべての画像を表示するのを手伝ってください。 は、事前にありがとう:)MongoDBからアップロードされたすべてのイメージを取得する

var express = require('express'); //Express Web Server 
var busboy = require('connect-busboy'); //middleware for form/file upload 
var path = require('path');  //used for file path 
var fs = require('fs-extra');  //File System - for file manipulation 
var mongoose = require('mongoose'); 
var handlebars = require('handlebars'); 
var mongoClient = require('mongodb').mongoClient; 
var objectId = require('mongodb').ObjectId; 
var app = express(); 
app.use(busboy()); 
app.use(express.static(path.join(__dirname, 'public'))); 
mongoose.Promise = global.Promise; 

mongoose.connect('mongodb://localhost:27017/postname'); 
/* ========================================================== 
Create a Route (/upload) to handle the Form submission 
(handle POST requests to /upload) 
Express v4 Route definition 
============================================================ */ 
app.set('view engine', 'hbs'); 
app.set('views', path.join(__dirname, 'views')); 

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

//You can import your schema like this 
const Name = require('./name'); 

app.get('/', function(req, res, next) { 
    res.render('index',{'title': 'New post app'}); 
}); 

//I have changed your route since it seems to be clashing with the above 
app.post('/save' ,function (req, res, next) { 
    var fstream; 
    req.pipe(req.busboy); 
    req.busboy.on('file', function(fieldname, file, filename, done){ 
    console.log("Uploading" + filename); 
    //path where the file is being uploaded 
    fstream = fs.createWriteStream(__dirname + '/public/uploads/' + filename); 
    var dirname = path.join('uploads/' + filename); 
    file.pipe(fstream); 
    fstream.on('close', function(){ 
     console.log("Upload Success" + filename); 

     let name = new Name({ 
     path: dirname 
     }); 
     name.save((err)=>{ 
     if(err) throw err; 
     console.log(`saved : ${name}`); 
     res.redirect('/profile'); 
     call(dirname); 
     }); 
    }); 
    }); 
}); 
function call(dirname){ 
Name.findOne({path: dirname}, (err, result) =>{ 
    if(err) throw err; 
    var imgpath = result.path; 
    console.log("Saved check" + imgpath); 
    app.get('/profile', (req, res) =>{ 
     res.render('profile',{ 
     photo: req.result, 
     result : imgpath 
     }); 
    }); 
    }); 
} 


var server = app.listen(3030, function() { 
    console.log('Listening on port %d', server.address().port); 
}); 

私name.jsは、ビューはあなたが1つのオブジェクトのみを取り出すfindOneを使用している画像

<html> 
    <head> 
    <title>User Profile</title> 
    </head> 
    <body> 
    <h1>Welcome</h1>{{result}}<br><br> 
    <img src="{{result}}" height="180" width="250"> 
    </body> 
</html> 

答えて

0

を表示するファイル

let mongoose = require('mongoose'); 
let Schema = mongoose.Schema; 

let compileSchema = new Schema({ 
    path: String 
}); 

let Compile = mongoose.model('Compiles', compileSchema); 

module.exports = Compile; 

マングーススキーマ

を提出しますデータベースから。

var express = require('express') // Express Web Server 
var busboy = require('connect-busboy') // middleware for form/file upload 
var path = require('path') // used for file path 
var fs = require('fs-extra'); // File System - for file manipulation 
var mongoose = require('mongoose') 
var handlebars = require('handlebars') 
var mongoClient = require('mongodb').mongoClient 
var objectId = require('mongodb').ObjectId 
var app = express() 
app.use(busboy()) 
app.use(express.static(path.join(__dirname, 'public'))) 
mongoose.Promise = global.Promise 

mongoose.connect('mongodb://localhost:27017/postname') 
/* ========================================================== 
Create a Route (/upload) to handle the Form submission 
(handle POST requests to /upload) 
Express v4 Route definition 
============================================================ */ 
app.set('view engine', 'hbs') 
app.set('views', path.join(__dirname, 'views')) 

app.use(express.static(__dirname + '/public')) 

// You can import your schema like this 
const Name = require('./name') 

app.get('/', function (req, res, next) { 
    res.render('index', {'title': 'New post app'}) 
}) 

// I have changed your route since it seems to be clashing with the above 
app.post('/save' , function (req, res, next) { 
    var fstream 
    req.pipe(req.busboy) 
    req.busboy.on('file', function (fieldname, file, filename, done) { 
    console.log('Uploading' + filename) 
    // path where the file is being uploaded 
    fstream = fs.createWriteStream(__dirname + '/public/uploads/' + filename) 
    var dirname = path.join('uploads/' + filename) 
    file.pipe(fstream) 
    fstream.on('close', function() { 
     console.log('Upload Success' + filename) 

     let name = new Name({ 
     path: dirname 
     }) 
     name.save((err) => { 
     if (err) throw err 
     console.log(`saved : ${name}`) 
     res.redirect('/profile') 
     // removed call(), no need for it 
     }) 
    }) 
    }) 
}) 

app.get('/profile', (req, res) => { 
    // get all documents in the db by using find with no conditions 
    Name.find({}, (err, results) => { 
    if (err) throw err 
    var images = [] 
    for (var result of results) { 
     images.push(result.path) 
    } 
    res.render('profile', { 
     images: images 
    }) 
    }) 
}) 

var server = app.listen(3030, function() { 
    console.log('Listening on port %d', server.address().port) 
}) 

とビューが何かする必要がありますので、あなたがそれらを表示するための画像をループ、私はあなたがハンドルバーを使用していると信じていなければならないのビューで:あなたはすべての画像を取得したいのであれば、あなたのコードは次のようなものでなければなりませんこのように:

<html> 
    <head> 
    <title>User Profile</title> 
    </head> 
    <body> 
    <h1>Welcome</h1> 
    {{#each images}} 
     <img src="{{this}}" height="180" width="250"> 
    {{/each}} 
    </body> 
</html> 
+0

ありがとうございます。私はこれを一週間近く固執した。非常に非常に非常にありがとうございます:) –

関連する問題