Vue + Element UI + nodejs Koa 用multer 自动上传，放上去就能用

#1、写做背景 1.全栈开发的后台。koa 2.element-ui upload组件默认是自动上传的。但愿不改变。比通常点击上传方便，并且有进度条。 #2、开始

1. 下载插件

npm install --save koa-multer
复制代码

2. 新建 upload.js 做为router

说明 代码中判断了文件夹是否存在。

文件：upload.js

//upload.js
const koaRouter = require('koa-router');
// import upload from '../util/getpath.js'
// import koaRouter from 'koa-router'
const router = koaRouter()
const multer = require('koa-multer');
const fs=require("fs");
const storage = multer.diskStorage({
    destination (req, file, cb) {

        let publicClientimg = 'public/clientimg';
        fs.exists(publicClientimg,function(exists){
            if(exists){
                console.log("文件存在")
            }
            if(!exists){
                console.log("文件不存在")
                fs.mkdir(publicClientimg,function(err){
                    if (err) {
                        console.log('建立文件出错')
                        return console.error(err);
                    }
                    console.log("目录建立成功。");

                });
            }
        })
        // 设置文件的存储目录，需提早建立

        cb(null, publicClientimg)
    },
    filename (req, file, cb) {
        // 设置 文件名
        const name = file.originalname;
        // 设置文件的后缀名，
        //我这里取的是上传文件的originalname属性的后四位，
        // 即： .png，.jpg等，这样就须要上传文件的后缀名为3位
        const extension = name.substring(name.length - 4);
        cb(null, 'img-' + Date.now() + extension);
    }
})
const upload = multer({ storage: storage })

router.post('/add-good', upload.array('file', 5), async (ctx) => {
    const files = ctx.req.files; //上传过来的文件
    ctx.body = {msg: '添加成功'};  //返回数据
})
module.exports = router
复制代码

说明 个人目录结构以下

3. 我是用了自动加载路由目录。 文件：index.js

//全局 路由
const fs = require('fs');
module.exports = (app) => {
    fs.readdirSync(__dirname).forEach(file => {
        if (file === 'index.js') { return; }
        const route = require(`./${file}`);

        let str = file.split('.');

        let path =`/api/${str[0]}/`;
        console.log('path', path)
        route.prefix(path)
        app.use(route.routes()).use(route.allowedMethods());
    });
}
复制代码

4. 添加到启动js, app.js中添加。

// routes
const index = require('./routes/index')
//自动加入路由
index(app);
复制代码

#结束

---

给还不太明白的小伙伴附上app.js 文件：app.js

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')

const mongoose = require('mongoose')
const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs, {useNewUrlParser: true,useUnifiedTopology: true})

onerror(app)

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'ejs'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})


// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app
// routes
const index = require('./routes/index')
//自动加入路由
index(app);
复制代码

本文糖果

1. 文件自动上传
2. route自动加载

感兴趣加个好友👇

欢迎您的辣条。👇