koa2将vue上传到后端的图片显示出来

要将Vue上传到后端的图片显示出来，可以使用以下步骤：

1. 在前端Vue中，使用`axios`或其他HTTP库将图片上传到后端服务器。

2. 在后端Koa2中，使用`koa-body`或其他中间件来解析上传的图片。

3. 将上传的图片保存到服务器的某个目录下，例如`public/images`。

4. 在Koa2中，可以使用`koa-static`中间件将该目录设置为静态资源目录，使得上传的图片可以通过URL访问。

5. 在前端Vue中，使用`<img>`标签来显示图片，将`src`属性设置为上传图片的URL即可。

代码示例：

前端Vue代码：

// 上传图片
uploadImage() {
  let formData = new FormData();
  formData.append('file', this.selectedFile);
  axios.post('/api/upload', formData)
    .then(response => {
      console.log(response.data);
      this.imageUrl = response.data.url; // 保存上传图片的URL
    })
    .catch(error => {
      console.log(error);
    });
}

后端Koa2代码：

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

const app = new Koa();

// 解析上传的图片
app.use(koaBody({
  multipart: true,
  formidable: {
    uploadDir: path.join(__dirname, 'public/images'), // 上传图片保存的目录
    keepExtensions: true // 保留图片扩展名
  }
}));

// 设置静态资源目录
app.use(koaStatic(path.join(__dirname, 'public')));

// 处理上传图片请求
app.use(async ctx => {
  if (ctx.request.path === '/api/upload' && ctx.request.method === 'POST') {
    const file = ctx.request.files.file;
    const url = '/images/' + file.path.split('/').pop(); // 上传图片的URL
    ctx.body = { url: url };
  }
});

app.listen(3000);

前端Vue代码：

<template>
  <div>
    <input type="file" @change="onFileSelected">
    <button @click="uploadImage">上传</button>
    <img :src="imageUrl" v-if="imageUrl">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
      imageUrl: null
    };
  },

  methods: {
    onFileSelected(event) {
      this.selectedFile = event.target.files[0];
    },

    // 上传图片
    uploadImage() {
      let formData = new FormData();
      formData.append('file', this.selectedFile);
      axios.post('/api/upload', formData)
        .then(response => {
          console.log(response.data);
          this.imageUrl = response.data.url; // 保存上传图片的URL
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>