如何从使用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的文件夹获取图像？

回答

相关问题