將圖片上載到html

-1

我在上傳圖片並將其自動保存到我的數據庫（mongodb）。但我堅持上傳圖片。這裏是我的server.js：將圖片上載到html

var express = require("express"); 
var multer = require('multer'); 
var app   = express(); 
var storage = multer.diskStorage({ 
    destination: function (req, file, callback) { 
    callback(null, './uploads'); 
    }, 
    filename: function (req, file, callback) { 
    callback(null, file.fieldname + '-' + Date.now()); 
    } 
}); 
var upload = multer({ storage : storage}).single('userPhoto'); 

app.get('/',function(req,res){ 
     res.sendFile(__dirname + "/index.html"); 
}); 

app.post('/api/photo',function(req,res){ 
    upload(req,res,function(err) { 
     if(err) { 
      return res.end("Error uploading file."); 
     } 
     res.end("File is uploaded"); 
    }); 
}); 

app.listen(3000,function(){ 
    console.log("Working on port 3000"); 
});

而且這裏是我的index.html：

<!DOCTYPE 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"> 
     <span id = "status"></span> 
    </form> 
    </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 src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script> 

    <script> 
    $(document).ready(function() { 

     $('#uploadForm').submit(function() { 
      $("#status").empty().text("File is uploading..."); 
      $(this).ajaxSubmit({ 

       error: function(xhr) { 
      status('Error: ' + xhr.status); 
       }, 

       success: function(response) { 
      $("#status").empty().text(response); 
        console.log(response); 
       } 
     }); 
      //Very important line, it disable the page refresh. 
     return false; 
     });  
    }); 
    </script> 

</html>

當我嘗試運行它

POST http://localhost:8051/api/photo 404() 
send @ jquery.min.js:4 
ajax @ jquery.min.js:4 
o @ jquery.form.min.js:1 
e.fn.ajaxSubmit @ jquery.form.min.js:1 
(anonymous function) @ (index):25 
dispatch @ jquery.min.js:3 
i @ jquery.min.js:3 
(index):28 
Uncaught TypeError: status is not a function(…) 
error @ (index):28 
t.error @ jquery.form.min.js:1 
n @ jquery.min.js:2 
fireWith @ jquery.min.js:2 
w @ jquery.min.js:4 
d @ jquery.min.js:4

我的問題是，我怎麼得到這個錯誤我修復了錯誤，如何將圖像保存到mongodb？謝謝。

來源

2016-11-15 Wilson Kosasih

錯誤很明顯，在瀏覽器中你沒有定義'status（）'函數，但是你正在試圖在你的'error'處理程序中使用它。 – mscdex

另外，如果你想直接將文件流式傳輸到mongodb，你需要下載一個像'busboy'這樣的模塊，它可以爲你提供對文件流的訪問。 – mscdex

你上線28得到一個錯誤：

  status('Error: ' + xhr.status);

你可能想改變這一行：

$("#status").empty().text('Error: ' + xhr.status);

這不會解決你的問題，但它應該顯示上傳錯誤，所以你可以採取下一步。祝你好運！

來源

2016-11-15 05:10:15

它適用於上傳問題，但404錯誤仍然存在 –

將圖片上載到html

回答

相關問題