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…