element-ui+koa2 实现图片上传并显示到前端

首先，需要在前端使用 element-ui 的上传组件，可以参考官方文档：https://element.eleme.cn/#/zh-CN/component/upload。

然后，在后端使用 koa2 处理上传的图片，可以使用 koa-body 和 koa-static 中间件，具体步骤如下：

安装 koa-body 和 koa-static：

npm install koa-body koa-static --save

在后端代码中引入 koa-body 和 koa-static：

const Koa = require('koa');
const koaBody = require('koa-body');
const koaStatic = require('koa-static');

const app = new Koa();

配置 koa-body 中间件，用于处理上传的文件：

app.use(koaBody({
  multipart: true,
  formidable: {
    maxFileSize: 200 * 1024 * 1024, // 上传文件的最大大小为200MB
    uploadDir: './uploads' // 上传文件的保存目录
  }
}));

配置 koa-static 中间件，用于访问上传的文件：

app.use(koaStatic(__dirname + '/uploads'));

在路由中处理上传的文件，保存到指定的目录：

router.post('/upload', async (ctx, next) => {
  const file = ctx.request.files.file; // 获取上传的文件
  const reader = fs.createReadStream(file.path); // 创建可读流
  const ext = file.name.split('.').pop(); // 获取文件后缀名
  const fileName = uuid() + '.' + ext; // 生成随机文件名
  const filePath = path.join(__dirname, 'uploads', fileName); // 拼接文件保存路径
  const upStream = fs.createWriteStream(filePath); // 创建可写流
  reader.pipe(upStream); // 可读流通过管道写入可写流
  ctx.body = {
    url: '/uploads/' + fileName // 返回文件访问路径
  };
});

在前端代码中使用 element-ui 的上传组件，上传图片并展示：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :show-file-list="false"
    :on-success="handleSuccess">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
  <img :src="imageUrl" v-if="imageUrl">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleSuccess(response) {
      this.imageUrl = response.url;
    }
  }
};
</script>

以上就是使用 element-ui 和 koa2 实现上传图片并显示到前端的基本步骤。