一、目标
- 完成单文件上传，并进行复制到其他目录
- 完成上传文件的列表的显示功能
- 使用Vue+Ajax完成图片的前端页面展示
二、参照
可以参照前面两篇文章，本是对功能的进一步增强
三、服务器
- 文件结构：
/
app.js
-public/
index.html
+images/
+uploads/
+node_modules/
package.json
- package.json的依赖部分
"dependencies": {
"express": "^4.17.1",
"multer": "^1.4.2"
}
- app.js的内容
//app.js
const fs=require('fs')
const express=require('express')
const http=require('http')
//文件上传中间件(指定上传的临时文件夹是/uploads)
const multer=require('multer')
let upload = multer({ dest: 'uploads/' })
let app=express();
const FILE_PATH="public/images/"
//HttpServer服务的中间件(public目录下的index.html为首页)
app.use(express.static('public'))
//文件上传的处理（avatar是上传时的filedName）
app.post('/upload', upload.single('avatar'), function (req, res, next) {
//req.body是普通表单域
//req.file是文件域
let msg={
body:req.body,
file:req.file
}
//将临时文件上传到/public/images中
let output=fs.createWriteStream(FILE_PATH+req.file.originalname)
let input=fs.createReadStream(req.file.path)
input.pipe(output)
res.json(msg)
})
//接收前端的请求，返回上传图片的列表
app.get("/files",function (req,res) {
fs.readdir('public/images',function (err,dir) {
res.json(dir)
})
})
//启动Express服务器
let server=http.createServer(app);
server.listen(8000,function () {
console.log("start server at port 8000")
})
- /public/index.html的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<style type="text/css">
li{
list-style: none;
display: inline-block;
}
li img{
margin: 10px;
}
</style>
</head>
<body>
<h1>您上传的照片墙</h1>
<div id="app">
<ul>
<li v-for="img of images">
<img :src="'images/'+img" alt="" width="300px">
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
images:[]
},
created(){
fetch("/files",{method:'GET'})
.then(res=>res.json())
.then(files=>{
this.images.push(...files)
})
}
})
</script>
</body>
</html>
网友评论