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…