Question

我尝试使用node.js，express和multer上传后在index.html上显示图像。 multer实现基于教程。

上传有效。图像显示在＆＃34; / uploads＆＃34;并且console.log按预期完成。
index.html显示＆＃34;文件已上传。＆＃34;来自消息var。
开发工具控制台说：GET http://127.0.0.1:3000/uploads/test1423920987055.jpg 404（未找到）。
我试图通过＆lt;直接获取图片。 img＆gt;但它没有表现出来。

如果能得到解释，我将非常感激，以便了解我所缺少的内容。

这是我的server.js：

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

和我的index.html：

<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>

提前感谢您的每一个提示。

Node.js Express图片在上传后不会显示

0 个答案: