javascript - 上传的图片不显示。我只是从其他图片的数组/列表中获取它的链接,即使我将它的值推送到该列表/数组
问题描述
我已经用快速车把附加了我的列表项详细信息,并且它们正在显示。问题是当我想附加新的列表项图片时,因为以前的项目有图片。现在我将只显示除图片之外的新项目详细信息。
当然,它适用于在线图片,但不适用于本地加载的图片,因为我刚刚体验过。
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>
解决方案
我应该使用 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>
推荐阅读
- office-js - 仅在选定的表格单元格中获取段落项目
- node.js - 如何在 Azure Api 的 nodejs 中使用 recyclesignalenabled
- react-native - 如何从 React Native 中的三个同时发生的事件中接收一个回调?
- javascript - javascript中有没有类似python的`with`语句的东西?
- java - 如何将数据字段插入数据库中的表?
- c# - 有没有办法使用连接工厂设置实体框架核心 DbContext?
- python - 使用子类模型时 TQDM 激增
- json-ld - 使用 heracles.ts 提取 hydra:class 或 hydra:collection 的属性
- javascript - Firebase 实时数据库 JS 错误:Reference.set 失败
- omnet++ - 为什么 omnet++ 没有为 .msg 文件中定义的类成员生成 get 方法?