nodejs expressjs上传图片并显示它们(nodejs expressjs upload images and display them)
我有以下代码
app.js
var express = require('express'), fs = require('fs'), format = require('util').format; var app = express(); app.configure(function() { app.use(express.bodyParser()); app.use(express.bodyParser({uploadDir:'./static/files/'})) app.use(express.methodOverride()); app.use(express.static(__dirname + '/static')); app.use(express.errorHandler({ dumpException: true, showStack: true })); }); app.set('views',__dirname + '/views'); app.set('view engine', 'jade');好的，我有这条路线
app.post('/addPhoto', products.addPhoto);这个表格
form(action='/new', method='POST', enctype="multipart/form-data") input(type='text', name="name", placeholder='nanme') input(type='text', name="description",placeholder='description') input(type='text', name="thumbnail_img",placeholder='path') input(type='number', name='price', placeholder='123') input(type="file", name="thumbnail") input(type='submit')我在绝望的意图中使用了thumbnail_img来修改路径
现在在products.js
var products = exports.products = []; var format = require('util').format; var fs = require('fs'); products.push( { id:0, name:'name 1', description:'description1', thumbnail_img: '', price: 100 }, { id:1, name: 'name_2', description: 'description2', thumbnail_img: '', price: 150 } ); exports.addPhoto = function(req,res){ var body = req.body; var tmp_path = req.files.thumbnail.path; var target_path = './static/files/' + req.files.thumbnail.name; fs.rename(tmp_path, target_path, function(err) { if (err) throw err; fs.unlink(tmp_path, function() { body.thumbnail_img = target_path; if (err) throw err; }); }); var body = req.body; // Fun here is I got a path starting with a . // so this code is for remove the . var n = target_path.toString() var n2 = n.replace('.',''); body.thumbnail_img = n2; products.push(req.body); res.redirect('/products'); };问题是当我使用模板显示src属性显示的产品时，如src="./static/files/name-fo-the-pics"所以如何显示我上传的图像
I have the following code
app.js
var express = require('express'), fs = require('fs'), format = require('util').format; var app = express(); app.configure(function() { app.use(express.bodyParser()); app.use(express.bodyParser({uploadDir:'./static/files/'})) app.use(express.methodOverride()); app.use(express.static(__dirname + '/static')); app.use(express.errorHandler({ dumpException: true, showStack: true })); }); app.set('views',__dirname + '/views'); app.set('view engine', 'jade');OK then I have this route
app.post('/addPhoto', products.addPhoto);This form
form(action='/new', method='POST', enctype="multipart/form-data") input(type='text', name="name", placeholder='nanme') input(type='text', name="description",placeholder='description') input(type='text', name="thumbnail_img",placeholder='path') input(type='number', name='price', placeholder='123') input(type="file", name="thumbnail") input(type='submit')I used thumbnail_img in a desperate intent to modify the path
now in products.js
var products = exports.products = []; var format = require('util').format; var fs = require('fs'); products.push( { id:0, name:'name 1', description:'description1', thumbnail_img: '', price: 100 }, { id:1, name: 'name_2', description: 'description2', thumbnail_img: '', price: 150 } ); exports.addPhoto = function(req,res){ var body = req.body; var tmp_path = req.files.thumbnail.path; var target_path = './static/files/' + req.files.thumbnail.name; fs.rename(tmp_path, target_path, function(err) { if (err) throw err; fs.unlink(tmp_path, function() { body.thumbnail_img = target_path; if (err) throw err; }); }); var body = req.body; // Fun here is I got a path starting with a . // so this code is for remove the . var n = target_path.toString() var n2 = n.replace('.',''); body.thumbnail_img = n2; products.push(req.body); res.redirect('/products'); };Problem is when I use the template for show the products the src attribute shows like this src="./static/files/name-fo-the-pics" so how I do for display the images I uploaded
最满意答案
在这种情况下，您可以做的是获得存储文件的目标路径并将其保存到数据库中。
使用此方法进行上传
app.post('/upload', function(req, res) { // get the temporary location of the file var tmp_path = req.files.thumbnail.path; // set where the file should actually exists - in this case it is in the "images" directory target_path = '/tmp/' + req.files.thumbnail.name; // move the file from the temporary location to the intended location fs.rename(tmp_path, target_path, function(err) { if (err) throw err; // delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files fs.unlink(tmp_path, function() { if (err) throw err; }); }); });虽然在这种方法中反复显示路径
fs.readFile(target_path, "binary", function(error, file) { if(error) { res.writeHead(500, {"Content-Type": "text/plain"}); res.write(error + "\n"); res.end(); } else { res.writeHead(200, {"Content-Type": "image/png"}); res.write(file, "binary"); }它应该工作。
What you can do in this case is that you got the target path of the stored file and get it save into database.
Use this method for uploading
app.post('/upload', function(req, res) { // get the temporary location of the file var tmp_path = req.files.thumbnail.path; // set where the file should actually exists - in this case it is in the "images" directory target_path = '/tmp/' + req.files.thumbnail.name; // move the file from the temporary location to the intended location fs.rename(tmp_path, target_path, function(err) { if (err) throw err; // delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files fs.unlink(tmp_path, function() { if (err) throw err; }); }); });While retriving show that path in this method
fs.readFile(target_path, "binary", function(error, file) { if(error) { res.writeHead(500, {"Content-Type": "text/plain"}); res.write(error + "\n"); res.end(); } else { res.writeHead(200, {"Content-Type": "image/png"}); res.write(file, "binary"); }It should work then.
更多推荐
发布评论