网站首页 » 前端开发 » Vue » vue2+koa2 图片上传功能实现
上一篇:
下一篇:

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

文章关键词:
  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-koa-files-upload/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END