Javascript Node.js Express image赢得'；上传后不显示
在使用node.js、express和multer上传图像后，我尝试在index.html上显示图像。multer实现基于教程Javascript Node.js Express image赢得'；上传后不显示,javascript,html,node.js,express,Javascript,Html,Node.js,Express,在使用node.js、express和multer上传图像后，我尝试在index.html上显示图像。multer实现基于教程 上传工作正常。图像显示在“/uploads”中，console.log按预期完成 html显示消息var中的“文件已上载” 开发工具控制台说：获取404（未找到） 我试图通过直接获取图片，但它没有显示出来 如果我能得到一个解释，让我明白我错过了什么，我将非常感激 这是我的server.js： app.use(express.static(__dirname + '/
- 上传工作正常。图像显示在“/uploads”中，console.log按预期完成
- html显示消息var中的“文件已上载”
- 开发工具控制台说：获取404（未找到）
- 我试图通过
直接获取图片，但它没有显示出来
app.use(express.static(__dirname + '/uploads'));
app.use(multer({ dest: './uploads/',
rename: function (fieldname, filename) {
return filename+Date.now();
},
onFileUploadStart: function (file) {
console.log(file.originalname + ' is starting ...')
},
onFileUploadComplete: function (file) {
console.log(file.fieldname + ' uploaded to ' + file.path)
message = "<p>File uploaded.</p>"
message += "<p><img src=\"" + file.path + "\"> </p>";
done=true;
}
}));
app.get('/',function(req,res){
res.sendfile("index.html");
});
app.post('/api/photo',function(req,res){
if(done==true){
console.log(req.files);
res.end(message);
//res.end("File uploaded.");
}
});
app.listen(3000,function(){
console.log("Working on port 3000");
});
app.use（express.static（uu dirname+/uploads））；
app.use（multer（{dest:'./上传/'，
重命名：函数（字段名、文件名）{
返回文件名+日期.now（）；
},
onFileUploadStart:函数（文件）{
console.log（file.originalname+'正在启动…'）
},
onFileUploadComplete：函数（文件）{
console.log（file.fieldname+'上载到'+file.path）
message=“文件已上载。”
消息+=“”；
完成=正确；
}
}));
app.get（'/'，函数（req，res）{
res.sendfile（“index.html”）；
});
app.post（'/api/photo'，函数（req，res）{
如果（完成==真）{
控制台日志（请求文件）；
res.end（消息）；
//res.end（“上传文件”）；
}
});
app.listen（3000，函数（）{
控制台日志（“在端口3000上工作”）；
});
<html>
<head>
<title>File upload Node.</title>
</head>
<body>
<form id="uploadForm"
enctype="multipart/form-data"
action="/api/photo"
method="post">
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
</form>
<div class="pic"> </div>
<img src="http://127.0.0.1:3000/uploads/test1423920256762.jpg">
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<script>
$(document).ready(function() {
$('#uploadForm').submit(function() {
$(this).ajaxSubmit({
error: function(xhr) {
status('Error: ' + xhr.status);
},
success: function(response) {
$(response).appendTo('.pic');
console.log(response);
}
});
return false;
});
});
</script>
</html>
文件上传节点。
$（文档）.ready（函数（）{
$（'#uploadForm'）。提交（函数（）{
$（此）.ajaxSubmit({
错误：函数（xhr）{
状态（“错误：”+xhr.status）；
},
成功：功能（响应）{
$（响应）.appendTo（'.pic'）；
控制台日志（响应）；
}
});
返回false；
});
});
提前感谢您的每一个提示。我在您的代码中没有看到任何指向
/uploads/app.use（express.static（\uu dirname+'/uploads'）；http://127.0.0.1:3000/uploads/test1423920256762.jpghttp://127.0.0.1:3000/test1423920256762.jpgapp.use（'/uploads'，express.static（uu dirname+'/uploads'））/uploads