相册读取+文件上传(express+vue部分)

一、目标

完成单文件上传，并进行复制到其他目录
完成上传文件的列表的显示功能
使用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>

最后编辑于：2019.10.25 12:22:39