2017-09-06 21 views
1

我正在尝试构建一个包含上传文件(如图像)并发布的应用程序。如何用Nodejs和Multer发布图片?

这是我迄今所做的:

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

var storage = multer.diskStorage({ 
     destination: function (req, file, cb) { 
     cb(null, './public/img'); 
     }, 
     filename: function (req, file, cb){ 
     cb(null, file.originalname + '-' + Date.now()); 
     } 
    }); 

var upload = multer({storage: storage}); 

所以这上面的代码将我上传的文件保存在一个名为在最后发表的帖子“IMG”

module.exports = function(app){ 

    app.get('/', function(req, res){ 
     res.render('index'); 
    }); 

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

    res.send(req.file); 
    }); 
} 

现在文件夹中请求我在'req.file'中获取关于该文件的所有元数据信息。我想获得的文件,并张贴如果有人,比如,让这个请求:

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

我应该将它们保存在数据库中的东西?

回答

2

不是真的,它保存在您的计算机内部,在您选择的目录中。

这是multer上传的纯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> 

这是我们的后端代码。在内部存储中,我选择在/upload目录下的文件上传位置,并为其指定当前时间的文件名。我们声明了upload变量的设置,然后我们在使用upload.single('avatar')的同时收到了一个post请求,我们在回调之前宣布它。什么avatar这里是它的输入标签内的HTML格式的文件名。在回调中,我们可以使用req.file访问我们的文件。模块以这种方式保存文件,非常容易使用。

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; 
}) 

确保,你给的图片,要么PNG或JPEG,或任何你想使用的扩展名,否则也不会被视为计算机的图像。

更新你的问题

如果你想显示客户端的图像而无需刷新页面,只需要使用AJAX与客户端浏览器的GET请求。您可以上传网络服务器网络服务器中的文件,并从那里检索图像。例如,我的个人资料图片保存在计算器中 here

您可以在get请求中使用参数来接收来自服务器的所有文件。

例如,想象一个客户向/uploads/imageOfApet.png发出获取请求。

app.get('/uploads/:theImageName', function(req, res){ 
    console.log(req.params.theImageName); //returns the imageOfApet.png 
    var theName = req.params.theImageName; //imageOfApet.png 
    res.sendFile(__dirname + "/uploads/" + theName); //Sending the user the file 
}) 
+0

我明白了。顺便谢谢你的回答。但我想要的是能够向网页上的用户显示刚刚上传的图像。我不知道该怎么做。 –

+0

请参阅更新@JeffGoes – turmuka

+0

例如在这段代码文件被保存到'uploads'目录,我可以将图像链接到我的网站里面像www.mywebsite.com/uploads/imageNumberOne.png – turmuka