загруженное изображение не будет отображаться.Я просто получаю ссылку из массива / списка других картинок, хотя я помещаю значение этого списка в этот список / массив

Question

Я уже добавляю детали своего списка с помощью экспресс-рулей, и они появляются.Проблема в том, что я хочу добавить новое изображение элемента списка, так как у предыдущих элементов есть изображения.Теперь я просто получу информацию о новом элементе, кроме изображения.

, конечно, он будет работать с онлайн-фотографиями, но с локально загруженными изображениями, как я только что испытал, не будет.

index.js:

var clothes = [{
    picture_Url: "images/fashion_gallery/tshirt.jpg",
    Type: "TShirt",
    Size: "XS",
    Qty: 1,
    Price: "R200"
}, {
    picture_Url: "images/fashion_gallery/Optimized-cap.JPG",
    Type: "Cap",
    Size: "M",
    Qty: 2,
    Price: "R200"
}, {
    picture_Url: "images/fashion_gallery/Optimized-long-sleeve.jpg",
    Type: "Long Sleeve",
    Size: "XL",
    Qty: 5,
    Price: "R400"
}];

app.post('/addProduct', function(req, res) {
    var data = JSON.parse(JSON.stringify(req.body));
    console.log(data);
    var product = {
        picture_Url: "images/fashion_gallery/" + data.pictureUrl,
        Type: data.typeOfCloth,
        Size: data.size,
        Qty: data.qty,
        Price: data.price
    }
    clothes.push(product)
    console.log(clothes);
    res.redirect("/");
});

home.handlebars:

<div id="tabs-2">
    <p>This is just a good Top for mid winter season.</p>
    <div class="ui-state-highlight ui-corner-all"><strong>
        {{#each longSleeve}}
          <img class="ads" src="{{this.picture_Url}}" alt="">
          <br>
          Quantity : {{this.Qty}}<br>
          {{this.Price}} : </strong><a href="#">Buy</a>
        {{/each}}
        </div>
    <input id="addButton" class="button" type="button" name="" value=" + Add">
</div>

Answer 1

Я должен был использовать multer, и вот мой код

index.js

 // newly added multer code 
var multer = require('multer'),
    upload = multer({
       dest: 'public/images/fashion_gallery/'
    });

var clothes = [{
  picture_Url: "images/fashion_gallery/tshirt.jpg",
  Type: "TShirt",
  Size: "XS",
  Qty: 1,
  Price: "R200"
}, {
  picture_Url: "images/fashion_gallery/Optimized-cap.JPG",
  Type: "Cap",
  Size: "M",
  Qty: 2,
  Price: "R200"
}, {
  picture_Url: "images/fashion_gallery/Optimized-long-sleeve.jpg",
  Type: "Long Sleeve",
  Size: "XL",
  Qty: 5,
  Price: "R400"
}];

app.get('/', (req, res) => {
  res.render('home')
});

//route to upload file and get its name 
app.post('/projects', upload.single('picture_Url'), (req, res) => {
  var data = JSON.parse(JSON.stringify(req.body));

  // get file name with multer after uploading it
  let file_name = req.file.filename;

  var product = {
    picture_Url: 'images/fashion_gallery/' + file_name,
    Type: data.typeOfCloth,
    Size: data.size,
    Qty: data.qty,
    Price: data.price
  }
  clothes.push(product)
  res.redirect("/projects");
});

home.handlebars

<div id="tabs-2">
        <p>This is just a good Top for mid winter season.</p>
        {{#each longSleeve}}
        <div class="ui-state-highlight ui-corner-all"><strong>
              <img class="ads" src="{{this.picture_Url}}" alt="">
              <br>
              Quantity : {{this.Qty}}
              <br>
              {{this.Price}} : </strong><a href="#">Buy</a>
        </div>
        {{/each}}
        <input id="addButton" class="button" type="button" name="" value=" + Add">
      </div>

<div id="addProductDiv" class="post hide">
    <!-- This is the most important part with multer image upload the enctype 
part you dont need to forget -->
      <form class="" action="/projects" method="post" enctype="multipart/form-data">
        <label for="avatar">Choose a file to upload:</label>
        <input type="file" id="avatar" name="picture_Url" accept="image/png, image/jpeg">
        Type : <select class="brandOptions" name="typeOfCloth">
          <option class="placeHolder" value="" selected="true" disabled="">SELECT TYPE</option>
          <option value="Cap">Cap</option>
          <option value="Long Sleeve">Long Sleeve</option>
        </select>

        Size : <input type="text" name="size" value="">

        Quantity : <input type="number" name="qty" value="">

        Price : <input type="text" name="price" value="">
        <input class="button" type="submit" name="" value="Submit">

      </form><br>
      <input id="back" class="backButton" type="submit" name="" value="Back">
  </div>