vue2+koa2 图片上传功能实现

前言

对于一个博客网站来说附件上传功能可以说是不可或缺，特别是图片上传功能，谁都不愿意看到一个文字满天飞，图片一张都没的博客。这样会让别人的阅读欲望大打折扣。本文主要是分享一下 前端 vue2 加后端 koa2 实现的图片上传功能，没有太多多余的代码，直接把实战中的主要代码呈上，希望你喜欢。

准备工作

需要了解 formDate 需要了解 axios（网络通信库，简单的理解就是请求） 需要了解 koa-multer 需要了解 koa-static 当然 vue2 和 koa2 是必需要掌握的。好下面我们就开始表演。

前端实现

我们现不妨从前端说起。

在页面中定义一个类型为 file 的 input，并且通过绑定change 事件来解发 uploadFilds

最简单的 HTML

<input type="file" @change="uploadFilds">
复制代码

接下来就是 uploadFilds 就去的定义，在methods 中定义如下方法实现：

import {uploadFilds} from "@/api"
export default {
    methods: {
    ......
    async uploadFilds(event) {
      // 拿到 input 的 files 对象
      const files = event.target.files;
      const formDate = new FormData();
      // 遍历对象中的每一个文件，并逐一添加到 formDate 实例对象中
      for (let file of Object.values(files)) {
        formDate.append("avatar", file);
      }
      //
      const response = await uploadFilds(formDate);
      if (response.code === 1) {
        console.log("文件上传成功！");
      }
    }
    ......
    }
}

复制代码

api 目录下的 index.js 代码为

import BaseService from "./baseService"
// 向服务端发起 post 请求
export const uploadFilds = (formDate) => {
  return BaseService.post("api/uploadFilds", formDate);
}
复制代码

上面用到了 BaseService 文件，BaseService.js 文件代码：

import axios from "axios";
const BaseService = axios.create({
  responseType: "json",
});
复制代码

其实上面 responseType: “json”, 也可以不用定义，默认就是这个类型，如果你指定类型就你可以像上面这样修改。

后端配合

现在我们到了后端，前端发起请求后，最先到达后端的路由层，所有我们就从路由层代码说起

const Router = require('koa-router');
const multer = require('koa-multer');
const Routers = new Router({
  prefix: '/api'
});
// 指定文件上传的目录
const upload = multer({
  dest: 'uploads/'
});
// 定义文件上传路由
Routers.post('/uploadFilds', upload.single('avatar'), UploadFildsController.uploadFilds);
module.exports = Routers;
复制代码

路由中用到了一个 PostController，并且调用了它里面的一个 uploadFiles 文件，我们不妨多花一秒来瞄一眼：

const CodeConfig = require('../config/code-config');
class UploadFildsController {
    static async uploadFilds(ctx) {
      // 获取上传文件对象
      // console.log(ctx.req.files);
      ctx.body = {
        code: CodeConfig.success
      }
    }
}
module.exports = UploadFildsController
复制代码

这里用到了 code-conifg 文件，这个文件只是定义了一些常量：

const CodeConfig = {
  error: 0, // 请求失败
  success: 1, // 请求成功
}
module.exports = CodeConfig
复制代码

这些常量标识了成功和失败的状态码而已。然后在所有需要给前端返回状态码的都从这里拿，这样做的好处是，如果我需要修改状态码，我只需要修改这个文件就可以了。但，其它用到这个状态的地方估计还需要作相应的修改，不过这只是我个人觉得而已，如果你有更优的方法或以留言。

这里的 Controller 只是做了一些很简单的事，告诉前端文件上传成功。

上面就是文件上传的完整套路，不过你可能会问，图片上传呢？其实图片上传就是文件上传种的一种，所以你懂的。

你可能会问，那 koa-static 有什么用？

这个是用来实现静态资源访问的。我们上传完了图片后肯定得访问，来展现给用户。具体的用户我们可以参数下 https://www.npmjs.com/package/koa-static

原文链接：yunkus.com/vuekoafiles…