【问题标题】:I want to upload an image to my blog with node.js我想用 node.js 将图像上传到我的博客
【发布时间】:2018-02-26 11:00:34
【问题描述】:

我正在使用 node.js 创建一个小型博客,我的博客在本地运行良好,但我想在我的文章中添加图像,我已经使用 bootstrap 来显示我的输入但在节点上。我无法保存我的图像,您能帮帮我吗?

我使用 Mongoose 作为在线服务器 (我在linux下工作)

server.js

var express = require('express'),
swig = require('swig'),
path = require('path'),
mongoose = require('mongoose'),
app = express();

app.use(express.logger());
app.use(express.bodyParser());
app.use(express.static(path.join(__dirname, 'public')));
app.engine('html', swig.renderFile);

app.set('view engine', 'html');
app.set('views', __dirname+'/views');

mongoose.connect('mongodb://**:**@**.mlab.com:**/blog');
var Article = mongoose.model('Article', {title: String, content: 
String, updated: Date}); 

app.get('/', function(req, res){

    Article.find({}).sort({updated: -1}).exec(function(err, articles){
        if(err){throw err;}

        data = {title: 'Mon super blog', articles: articles};
        res.render('index', data);
    })
 });

app.get('/article/:id', function(req, res){
    var article = Article.findById(req.params.id, function(err, 
article){
        if(err){throw err}
            var data = {article: article, title: article.title};
        res.render('article', data);
    });
 });


 app.post('/update/:id', function(req, res){
    Article.update({ _id : req.params.id}, {
        title: req.body.titre, content: req.body.contenu, updated: new 
 Date()
    },
    function(err){
        if(err){throw err;}
        res.redirect('/');
    });
});

app.get('/edit/:id', function(req, res){
    var article = Article.findById(req.params.id, function(err, 
article){
        if(err){throw err}
        var data = {article: article, title: 'Modifier ' 
 +article.title};
        res.render('edit', data);
    })
})


app.get('/destroy/:id', function(req, res){
    Article.remove({ _id : req.params.id}, function(err){
        if(err){throw err;}
        res.redirect('/');
    });
});

app.get('/create', function(req, res){
    var data = {title: 'Ajouter un article'};
    res.render('create', data);
});

app.post('/store', function(req, res){
    var article = new Article({
        title: req.body.titre,
        content: req.body.contenu,
        updated: new Date()
    });

    article.save(function(err, article){
        if(err){throw err;}
        res.render('created');
    });
});

app.listen(3000);
console.log('App running http://localhost:3000');

创建.html

{% extends 'layout.html' %}

{% block content %}

<form role="form" action="/store" method="post">

<div class="form-group">
<label for="titre">Titre</label>
<input type="text" name="titre" class="form-control" 
placeholder="titre de l'article" required>
</div>

<div class="form-group">
    <label for="titre">Titre</label>
    <label for="contenu">Contenu de l'article</label>
    <textarea name="contenu" class="form-control" placeholder="Contenu 
de l'article" rows="3" required></textarea>
</div>

<form>
    <div class="form-group">
        <label>Telecharger une image</label>
        <input type="file" class="form-control-file" name="img">
    </div>
</form>

<button type="submit" class="btn btn-default">Ajouter </button>

</form>


{% endblock %}

article.html

{% extends 'layout.html' %}

{% block content %}

<span class="pull-right"><a class="btn btn-danger remove" 
href="/destroy/{{article.id}}">Le bouton magique</a></span>

<h1>{{article.title}}</h1>


<p>{{article.content}}</p>

<span class="date">
Mis à jour {{article.updated.getDate()}} / 
{{article.updated.getMonth() +1}} / {{article.updated.getFullYear()}}
</span>

<div class="pull-right">
<a href="/edit/{{article.id}}" class="btn btn-default">Modifier</a>
</div>

{% endblock %}

【问题讨论】:

  • 您好我想保存图片并保存并发布到我的博客上
  • 你想从 ui 上传图片吗?还是只提供外部网址?
  • 我想从我的电脑上下载一张图片
  • 添加答案试试看。
  • 在我的 server.js 上,除了您刚刚发送给我的代码之外,我没有修改任何内容?

标签: javascript node.js express


【解决方案1】:

您可以使用multer库将文件上传并保存到本地存储中,并将相对路径保存到您的数据库。

var multer = require('multer');
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, './uploads')
    },
    filename: (req, file, cb) => {
      cb(null, file.fieldname + '-' + Date.now())
    }
});
var upload = multer({storage: storage});

app.post('/create',upload.single('img'), function(req,res)
{
  var article = new Article({
    title: req.body.titre,
    content: req.body.contenu,
    updated: new Date(),
    // you can store path here
  });

  article.save(function(err, article){
    if(err){throw err;}
    res.render('created');
  });
});

您可以在here阅读更多内容

但我的建议是使用任何云存储,如 s3 或 Azure 存储,并直接从客户端存储文件并将该 url 传递到服务器以存储在 DB 中。

客户端 > 请求服务器以获取临时凭据 > 使用该凭据上传文件 cred > 在服务器上调用/create,包括url。

【讨论】:

  • 为什么在 s3 上存储比在本地存储更好?
  • 就像您在本地存储文件一样,您无法轻松扩展应用程序,除此之外,您将其保存在易失性存储中并从那里提供服务,并且您的本地存储没有为服务于内容,因此您可以更好地利用这些服务,并且您的应用程序不应依赖任何硬件或其他东西。保持所有事物松散耦合
【解决方案2】:

这是我上周找到的解决方案,我要谢谢你

server.js

var express = require('express'),
multer = require('multer'),
swig = require('swig'),
path = require('path'),
mongoose = require('mongoose'),
app = express(); 

//app.use(express.logger());
app.use(express.urlencoded());
app.use(express.static(path.join(__dirname, 'public')));
app.engine('html', swig.renderFile);

app.set('view engine', 'html');
app.set('views', __dirname+'/views');




mongoose.connect('mongodb://*:*@ds145438.mlab.com:45438/blog');
var Article = mongoose.model('Article', {title: String,img: String, 
content: String, updated: Date}); 

app.get('/', function(req, res){

    Article.find({}).sort({updated: -1}).exec(function(err, articles){
        if(err){throw err;}

        data = {title: 'Mon super blog', articles: articles};
        res.render('index', data);
    })
 });

 app.get('/article/:id', function(req, res){
    var article = Article.findById(req.params.id, function(err, 
 article){
        if(err){throw err}
            var data = {article: article, title: article.title};
        res.render('article', data);
    });
  });


 app.post('/update/:id', function(req, res){
    Article.update({ _id : req.params.id}, {
        title: req.body.titre,
        img: '/uploads/' + req.file.filename,
        content: req.body.contenu,
        updated: new Date(),
    },
    function(err){
        if(err){throw err;}
        res.redirect('/');
    });
  });

  var upload = multer({dest: __dirname + '/public/uploads'});

  app.post('/create',upload.single('img'), function(req,res)
  {

    console.log('req : ', req.file)
    var article = new Article({
    title: req.body.titre,
    img: '/uploads/' + req.file.filename,
    content: req.body.contenu,
    updated: new Date(),
   });

   article.save(function(err, article){
    if(err){throw err;}
    res.render('created');
   });
 });


 app.get('/edit/:id', function(req, res){
    var article = Article.findById(req.params.id, function(err, 
 article){
        if(err){throw err}
        var data = {article: article, title: 'Modifier ' + 
 article.title};
        res.render('edit', data);
    })
 })


 app.get('/destroy/:id', function(req, res){
    Article.remove({ _id : req.params.id}, function(err){
        if(err){throw err;}
        res.redirect('/');
    });
 });

  app.get('/create', function(req, res){
    var data = {title: 'Ajouter un article'};
    res.render('create', data);
  });

  app.post('/store', upload.single('img'), function(req, res){

    console.log('req.body : ', req.body)
    console.log('req.file : ', req.file)
    var article = new Article({
        title: req.body.titre,
        img: '/uploads/' + req.file.filename,
        content: req.body.contenu,
        updated: new Date(),
    });

    article.save(function(err, article){
        if(err){throw err;}
        res.render('created');
    });
   });

  app.listen(3000);
  console.log('App running http://localhost:3000');

article.html

{% extends 'layout.html' %}

{% block content %}

<span class="pull-right"><a class="btn btn-danger remove" href="/destroy/{{article.id}}">Le bouton magique</a></span>

<h1>{{article.title}}</h1>

    <img src="{{article.img}}" alt="img">


<p>{{article.content}}</p>

<span class="date">
Mis à jour {{article.updated.getDate()}} / {{article.updated.getMonth() +1}} / {{article.updated.getFullYear()}}
</span>

<div class="pull-right">
<a href="/edit/{{article.id}}" class="btn btn-default">Modifier</a>
</div>

{% endblock %}

【讨论】:

猜你喜欢
  • 2023-01-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-22
  • 1970-01-01
  • 2020-07-29
  • 1970-01-01
相关资源
最近更新 更多