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

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

本文将介绍如何使用 Element UI 和 Koa2 框架，结合 formidable 中间件，实现图片上传并展示在前端页面上的功能。

1. 安装依赖

首先，安装 Element UI、Koa2、koa-router、koa-bodyparser：

npm install element-ui koa koa-router koa-bodyparser

2. 创建前端页面

在 src/views 文件夹下创建一个 upload.vue 文件，并添加以下代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :headers="headers"
      :before-upload="beforeUpload"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <img v-if="imageUrl" :src="imageUrl" style="max-width: 300px;"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    };
  },
  methods: {
    handleSuccess(res) {
      this.imageUrl = res.data.url;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
  },
};
</script>

<style scoped>
.upload-demo {
  display: inline-block;
  vertical-align: middle;
}
</style>

3. 创建后端接口

在根目录下创建一个 server.js 文件，并添加以下代码：

const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const koaBody = require('koa-body');
const path = require('path');
const fs = require('fs');
const app = new Koa();
const router = new Router();

router.post('/upload', koaBody({
  multipart: true,
  formidable: {
    uploadDir: path.join(__dirname, '/uploads'),
    keepExtensions: true,
    maxFieldsSize: 5 * 1024 * 1024,
  },
}), async (ctx) => {
  const file = ctx.request.files.file;
  const reader = fs.createReadStream(file.path);
  const ext = file.name.split('.').pop();
  const fileName = `${Date.now()}.${ext}`;
  const filePath = path.join(__dirname, '/uploads/') + fileName;
  const upStream = fs.createWriteStream(filePath);
  reader.pipe(upStream);
  ctx.body = {
    code: 200,
    data: {
      url: `http://localhost:3000/uploads/${fileName}`,
    },
  };
});

app.use(bodyParser());
app.use(router.routes());
app.use(router.allowedMethods());

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

4. 运行项目

在命令行中输入以下命令：

npm run serve

打开浏览器，在地址栏输入 http://localhost:8080/#/upload 进入上传页面，上传一张图片，上传成功后会显示在页面上。

注意:

server.js 中需要配置上传文件的保存路径，以及最大文件大小限制。
前端页面需要配置 el-upload 组件的 action 属性，指向后端接口地址。
前端页面需要配置 el-upload 组件的 headers 属性，用于设置请求头，例如 token。
前端页面需要在 beforeUpload 方法中对上传文件进行验证，例如文件类型和大小。

总结:

本文详细介绍了如何使用 Element UI、Koa2 和 formidable 实现图片上传并显示的功能。通过以上步骤，你就可以轻松实现图片上传功能，并将其展示在前端页面上。

更多学习:

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