Element-UI + Koa2 实现图片上传并显示

使用 Element-UI + Koa2 实现图片上传并显示

本文将详细介绍如何使用 Element-UI 和 Koa2 实现图片上传功能，并将上传的图片展示在前端页面。

1. 安装依赖

首先，需要安装以下依赖：

npm install element-ui koa koa-body koa-router koa-static

2. 创建 Koa2 服务端

创建 server.js 文件，编写以下代码：

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

const app = new Koa();
const router = new Router();

// 设置静态文件目录
app.use(koaStatic(__dirname + '/public'));

// 解析请求体
app.use(koaBody({
  multipart: true,
  formidable: {
    uploadDir: __dirname + '/public/uploads', // 上传文件保存的目录
    keepExtensions: true, // 保留文件扩展名
  }
}));

// 处理图片上传
router.post('/upload', async (ctx) => {
  const file = ctx.request.files.file;
  const filePath = file.path.replace(/\\/g, '/');
  ctx.body = {
    code: 200,
    data: {
      url: '/' + filePath, // 返回图片的 URL 路径
    }
  };
});

// 注册路由
app.use(router.routes());

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

3. 创建 Vue 组件

创建 Upload.vue 组件，编写以下代码：

<template>
  <div class="upload-demo">
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :file-list="fileList"
    >
      <img v-if="imageUrl" :src="imageUrl" class="upload-demo-image" />
      <i v-else class="el-icon-plus upload-demo-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      imageUrl: '',
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    handleSuccess(res) {
      if (res.code === 200) {
        this.imageUrl = res.data.url;
      } else {
        this.$message.error('上传失败');
      }
    },
  },
};
</script>

<style scoped>
.upload-demo {
  width: 200px;
  height: 200px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.upload-demo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-demo-icon {
  font-size: 28px;
  color: #999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

4. 运行程序

在命令行中执行以下命令启动 Koa2 服务端：

node server.js

在另一个命令行中执行以下命令启动 Vue 客户端：

npm run serve

访问 http://localhost:8080 即可看到上传图片的页面。上传完成后，图片将显示在页面上。

代码说明

服务端代码使用 koa-body 解析请求体，获取上传的图片文件。
将图片文件保存到 public/uploads 目录，并返回图片的 URL 路径。
前端代码使用 Element-UI 的 el-upload 组件实现图片上传功能。
使用 beforeUpload 方法对上传文件进行验证，确保上传的图片符合要求。
使用 handleSuccess 方法处理上传成功的回调，更新图片 URL 并显示图片。

注意事项

请确保已安装 element-ui、koa、koa-body、koa-router 和 koa-static 依赖。
上传文件保存的目录需要手动创建。
上传图片大小和格式可以通过 beforeUpload 方法进行限制。

通过以上步骤，您就可以使用 Element-UI 和 Koa2 实现图片上传并显示的功能。