我是初学者，试图学习文件上传使用nodejs一个mongodb.当我看教程，并按照它的文件上传将在图像形式。但如果我尝试上传文件，它会显示空白的图像框。我试图改变格式显示它像文件名。例如，如果上传PDF，它只会显示beginning_tutorial.pdf，这样我们就可以知道我们上传什么文件。我使用multer，但我不知道如何改变它显示文件名而不是图像..有人能告诉我..我真的很感激，如果你能帮助我了解如何使..非常感谢。
This is my app.js
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const mongoose = require('mongoose');
const path = require('path');
const fs = require('fs')
const app = express();
const storage = multer.diskStorage({
destination:function(req,file,cb){
cb(null,'./public/uploads')
},
filename(req,file,cb){
cb(null,file.originalname)
}
})
const upload = multer({storage:storage});
mongoose.connect('mongodb://localhost:27017/files',{useNewUrlParser:false})
.then(()=>console.log('connect')).catch(err=>console.log(err))
const fileSchema = new mongoose.Schema({
filespath:String
})
const fileModel = mongoose.model('filesdemo',fileSchema)
app.set('view engine','ejs');
app.set("views",path.resolve(__dirname,'views'));
const filePath = path.resolve(__dirname,'public');
app.use(express.static(filePath));
app.use(bodyParser.urlencoded({extended:false}))
app.get('/',(req,res)=>{
fileModel.find((err,data)=>{
if(err){
console.log(err)
}
if(data){
console.log(data)
res.render('home',{data:data})
}
else{
res.render('home',{data:{}})
}
})
})
app.post('/',upload.single('file'),(req,res)=>{
const x= 'uploads/'+req.file.originalname;
const files = new fileModel({
filespath:x
})
files.save((err,data)=>{
if(err){
console.log(err)
}
else{
console.log('data',data)
res.redirect('/')
}
})
})
app.get('/download/:id',(req,res)=>{
fileModel.find({_id:req.params.id},(err,data)=>{
if(err){
console.log(err)
}
else{
const path= __dirname+'/public/'+data[0].filespath;
res.download(path);
}
})
})
app.get('/delete/:id', (req, res) => {
fileModel.find({_id: req.params.id}, (err, data) => {
if(err) {
console.log(err);
res.send(err);
} else {
const path= __dirname+'/public/'+data[0].filespath;
fs.unlink(path, (err) => {
if (err) throw err;
console.log(path + ' was deleted');
});
fileModel.deleteOne({ _id: req.params.id }, (err) => {
if (err) {
console.log(err);
res.send(err);
} else {
console.log('File deleted successfully');
res.send('File deleted successfully');
}
});
}
});
});
const port = process.env.PORT || 3000 ;
app.listen(port,()=>console.log(`server running at ${port}`))
module.exports = app;这是我的家.ejs查看
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<center>
<h2>Upload Files</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="file" name="file"><br>
<input type="submit" value="Upload">
</form><br><br><br><br>
</center>
<h2>Download Files</h2>
<table>
<thead>
<tr>
<td>
image
</td>
<td>
download
</td>
</tr>
</thead>
<tbody>
<% for(var i=0; i < data.length > 0; i++) {%>
<tr>
<td><img src="<%= data[i].filespath %>" style="width:100px; height:100px;"></td>
<td>
<form action="/download/<%= data[i]._id %>" method="GET">
<input type="submit" value="Download">
</form>
<form action="/delete/<%= data[i]._id %>" method="GET">
<input type="submit" value="Delete">
</form>
</td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>我在用这个软件包。文件上传我放在public/uploads下了
"body-parser": "^1.20.1",
"ejs": "^3.1.8",
"express": "^4.18.2",
"fs": "^0.0.1-security",
"mongoose": "^6.8.1",
"multer": "^1.4.5-lts.1"
1条答案
按热度按时间h6my8fg21#
你需要改变你的ejs文件，ejs文件是一个html模型，Map你的page.as你的愿望，你想显示文件名替换图像，所以：
<td><img src="<%= data[i].filespath %>" style="width:100px; height:100px;"></td>该行更改为：
<td><%= data[i].filespath %></td>也许有用！