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自動加載

感興趣加個好友👇

歡迎您的辣條。👇