如何從使用Ajax和Nodejs的文件夾獲取圖像？

所以，我想上傳一張圖片並將其顯示在頁面的正下方，以便它看起來像我「張貼」圖片。如何從使用Ajax和Nodejs的文件夾獲取圖像？

所以這裏就是我在做的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檢索該張圖片，這就是我在JAVASCRIPT做：

$("input[type=submit]").click(function(){ 
    $.ajax({ 
     type: 'POST', 
     url: '/', 
     success: function(data){ 
      console.log(data); 
     } 
    }); 
});

但是，我沒有得到來自阿賈克斯成功函數的任何信息，相反，我只是去到另一個頁面，在這裏我可以看到這個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請求。

來源

2017-09-06 Jeff Goes

保存完圖像後，您可以使用這段代碼得到它們。這會將文件發送給用戶。假設您在./public/img裏面有一個名爲jeff.jpg的文件，您只需要去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>

UPDATE

我曾與使用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); 
})

來源

2017-09-06 22:22:59 turmuka

感謝您了很多響應。在你的例子中，我將不得不事先知道img（jeff.png）的名稱來發出ajax請求。我想要的是上傳圖片，獲取請求文件。後端的路徑，然後通過AJAX傳遞給前端。但我不知道該怎麼做。你能幫我嗎？ –

請參閱更新，我遇到了ajax問題，對不起，它出於某種原因重新加載了頁面。但我已經嘗試過這種方式，它會重新加載頁面，並向我們展示我們想要的圖像。 – turmuka

如何從使用Ajax和Nodejs的文件夾獲取圖像？

回答

相關問題