所以，我想上传一张图片并将其显示在页面正下方，这样看起来就像我正在“发布”图片。
这就是我在 NODEJS 中所做的:
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/img');
},
filename: function (req, file, cb){
cb(null, file.originalname);
}
});
var upload = multer({storage: storage});
app.post('/', upload.single('file'), function(req, res){
res.send(req.file);
});
所以现在每次我上传图片时它都会直接进入名为“img”的文件夹。
现在我想使用ajax检索这个img，这就是我在JAVASCRIPT中所做的:
$("input[type=submit]").click(function(){
$.ajax({
type: 'POST',
url: '/',
success: function(data){
console.log(data);
}
});
});
但是，我没有从 ajax 的 success 函数中得到任何东西，相反，我只是转到另一个页面，在那里我可以看到这个 json:
{
fieldname: "file",
originalname: "extensao.jpg",
encoding: "7bit",
mimetype: "image/jpeg",
destination: "./public/img",
filename: "extensao.jpg",
path: "public/img/extensao.jpg",
size: 411576
}
我怎样才能完成这项工作并在我的成功函数中接收这个 JSON？我认为通过执行 res.send(req.file) 我已经将数据发送到我的 ajax 请求。
最佳答案
保存图像后，您可以使用这段代码获取它们。这会将文件发送给用户。假设您有一个名为 jeff.jpg 的文件里面./public/img您所要做的就是访问 yourlink.com/files/jeff.jpg 来检索它。
app.get('/files/:filename', function(req, res){
res.sendFile(__dirname + 'public/img/' + req.params.filename);
})
这意味着您还可以仅使用 img 来渲染 html 中的图像。标签。例如，
<img src="./public/img/jeff.jpg"/>
这是我的 main.js 文件的完整代码，
var express = require('express')
var multer = require('multer')
var app = express();
var whereFilesAreStored = '/public/img';
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + whereFilesAreStored) //you tell where to upload the files,
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
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.get('/files/:filename', function(req, res){
res.sendFile(__dirname + whereFilesAreStored + '/' + req.params.filename);
})
//file upload
app.post('/post', upload.single('file'), function (req, res, next) {
console.log(req.file);
return false;
})
app.get('/ajax', function(req, res){
res.render('ajax');
})
为了在客户端使用图像，我创建了一个名为 ajax 的文件，如上所示。这是我的 html。
此时使用ajax是没有用的，它只是用来检查页面上是否有任何更新。但我仍然为 ajax 编写了一个小代码供您查看。 不要使用 ajax 来完成此任务。您可以使用<img src="thelink"/>将文件获取到您的页面。请检查下面我的 img 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Anasayfa</title>
<link type="text/css" rel="stylesheet" href="/cssDosyalari/ana.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var theUrl = 'http://localhost:2222/files/';
var fileName = "jeff.jpg";
var wholePath = theUrl + fileName;
$.ajax({
type: 'GET',
url: wholePath + fileName,
success: function(data){
console.log(data);
}
});
</script>
<img src="http://localhost:2222/files/jeff.jpg" alt="">
</body>
</html>
更新
我在使用 ajax 时遇到了问题。出于某种原因，该链接重定向了我，所以我想出了这个解决方案。我发送ajax，服务器上传文件，然后让客户端重新加载页面并显示图像。我这里使用的是ejs + ajax。请检查下面的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$('#my-form').submit( function(e) {
e.preventDefault();
//function myFunc(){
$.ajax({
url: '/post',
data: $('#myFile'),
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
}
})
e.preventDefault();
console.log('ajax sent');
return false;
// }
}
//onclick="myFunc()"
</script>
<form id="my-form" action="/post" method="post" enctype="multipart/form-data">
<input id="myFile" type="file" name="afile" value="">
<input type="submit" name="" value="submit">
</form>
<img id="theImgSrc" alt="">
<script type="text/javascript">
$( document ).ready(function() {
$('#theImgSrc').attr('src', 'http://localhost:2222/files/<%=fileName%>').load();
});
</script>
</body>
</html>
这是我的 main.js 文件，
app.get('/files/:filename', function(req, res){
res.sendFile(__dirname + whereFilesAreStored + '/' + req.params.filename);
})
app.get('/', function(req, res, next){
res.render('mult', {fileName: ''}); //our html document
})
app.post('/post', upload.single('afile'), function (req, res, next) {
res.render('mult', {fileName: req.file.originalname});
console.log(req.file);
})
关于javascript - 如何使用 Ajax 和 Nodejs 从文件夹中获取图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46084894/