Question

所以，我想上传一张图片并将其显示在页面正下方，这样看起来我就是＆＃34;张贴＆＃34;图片。

所以这就是我在 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);
});

所以现在我每次上传图片都会直接进入名为＆＃39; img＆＃39;

的文件夹。

现在我想使用ajax检索这个img，这是我在 JAVASCRIPT 中所做的：

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

但是，我从ajax的成功函数中得不到任何东西，相反，我只是去另一个页面，我可以看到这个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请求了。

Answer 1

在保存图像后，您可以使用此代码获取图像。这会将文件发送给用户。假设您在jeff.jpg内有一个名为./public/img的文件，您只需要访问 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>

<强>更新

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

如何使用Ajax和Nodejs从文件夹中获取图像？

1 个答案: