elementUI+koa实现图片上传功能

elementUI中的上传组件为：
大家可以先在自己的项目中运行一下饿了么上传组件

<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>

下面看一下服务端（koa）的配置：
这里使用了koa-multer插件
关于这该插件的使用课参考这两篇博客：
利用中间件Multer实现上传功能
nodejs - multer模块教程,使用multer进行附件上传
1、首先创建Multer对象，并通过storage对对象进行设置

//getpath.js
const multer = require('koa-multer')
const path = require('path')

//配置
var storage = multer.diskStorage({
//文件保存路径
destination: function (req, file, cb) {
cb(null, 'public/phoneManageSystem/')//path.resolve('public/phoneManageSystem')
},
//修改文件名称
filename: function (req, file, cb) {
var fileFormat = (file.originalname).split(".");  //以点分割成数组，数组的最后一项就是后缀名
cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
//加载配置
var upload = multer({
storage: storage,
limits: {
fileSize: 1024*1024/2 // 限制512KB
}
});

export default upload

2、配置路由

//upload.js
import upload from '../api/getpath.js'
import koaRouter from 'koa-router'
const router = koaRouter()

router.post('/uploadImg', upload.single('file'), async (ctx, next) => {
ctx.body = {
filename: ctx.req.file.filename//返回文件名
}
})

export default router

3、配置路由中间件

import koaRouter from 'koa-router'
import upload from './upload.js'
const router = koaRouter()

router.use('/phoneManageSystem/upload', upload.routes())

export default router