Vue3+Koa2实现图片上传（不再畏惧）

大家好，我是勇宝，一个热爱前端的小学生，年关将至，提前祝大家新年快乐。今天呢，我们就来好好的啃一啃图片上传，从一个前端开发者的角度来探讨一下图片上传前后端到底都做了哪些事情。

一、技术摘要

本次实现的Demo使用到的技术主要有如下：

• Vue3： 是一款用于构建用户界面的 JavaScript 框架。
• koa： 基于 Node.js 平台的下一代 web 开发框架。

以上就是我们本次要用到的一些技术栈，我把官方也给大家贴心的贴出来了，方便大家学习，任何技术都离不开原生，大家多多举一反三。

二、图片上传流程概述

从概念的角度给大家伙梳理一下图片上传要做哪些事情。

1. 前端

首先我们要知道图片上传的一个大概的流程是什么，前端做点啥？后端做点啥？

我用最原生的方式给大家唠一唠，首先呢这个前端有一个<input id="file_upload" type="file" accept="image/*" />标签，这个大家应该没忘记吧。

一般我们是把这个input隐藏，自己写那么几个小按钮，通过点击按钮触发input点击事件（click）来选择要上传的图片对吧。

然后就是回显的方式，一般有两种：

• 一种是等待后端处理好之后，response返回给我们前端然后去挂载。
• 还有一种就是我们前端解析好之后去显示，这种比较好，不浪费服务器资源，哈哈哈。

最后的最后就是我们的请求头要改为multipart/form-data。

2. 后端

首先是编写我们图片上传的接口uploads。因为这里我演示的是koa这个框架，所有后端我们使用到@koa/multur这个插件。

设置我们图片存放的路径（文件夹），当我们存储成功之后，再把图片信息存入我们的数据库（这一步就不给大家演示了，况且我也就会个MongoDB，就不献丑了），最后返回给前端成功的状态码。

三、项目搭建

这一块没有什么难度，我们简单带过。

前端

1. 初始化Vue

// 初始化模版
npm init vue@latest
// 安装依赖
npm install
// 需要用到 axios HTTP请求
npm install axios --save

后端（koa2）

我千辛万苦找了一个生成koa的脚手架，还不错。

1. 全局安装脚手架

npm install koa-generator -g

2. 初始化项目

// serve是项目名称，可以自定义
koa2 serve
// 安装项目依赖
npm install

3. 运行

npm run dev

四、开始撸代码

前期工作准备好之后，开始进入我们的正题

1. 编写html骨架

我们就写两个按钮，一个用来选择图片，一个用来上传到后端。

<template>
    <div class="upload">
        <input type="file" accept="image/*" class="upload-file" ref="selectFileRef" />
        <div class="upload-btns">
            <button class="upload-select">选择图片</button>
            <button class="upload-current">上传图片</button>
        </div>
        <!-- 用来回显我们的图片 -->
        <div class="upload-preview">
            <img src="" alt="图片" />
        </div>
    </div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.upload-file {
display: none;
}
</style>

2. 定义回显元素

如果我们的回显src是空的话，我们就让它隐藏。

<div class="upload-preview" v-show="previewUrl">
    <img src="" alt="图片" />
</div>

<script>
import { ref } from 'vue'
const previewUrl = ref('')
</script>

3. 编写选择按钮逻辑

使用ref获取inputDOM元素，通过点击选择图片按钮，触发input点击事件。

<button class="upload-select" @click="selectFileRef.click">选择图片</button>
......
......
// 获取input元素
const selectFileRef = ref(null)

此时我们点击选择图片，浏览器就会弹框，就可以选择我们要上传的图片啦！

4. 回显选择的图片

我们使用上边提到的第一种回显的方式，这样会减少http请求次数，减小服务器端压力。这里我们要监听input元素的change事件，当我们确定选择好图片之后会触发这个事件。具体如下：

<input type="file" accept="image/*" class="upload-file" ref="selectFileRef" @change="showImg" />
......
......
 const showImg = () => {
     // 获取我们上传的元素
     const file = selectFileRef.value.files[0]
     // 把图片转成base64
     const reader = new FileReader()
     reader.readAsDataURL(file)

     reader.onload = () => {
         // 给我们的回显元素赋值
         previewUrl.value = reader.result
     }
 }

5. 编写上传图片按钮

这是前端的最后一小步啦，这里我们主要注意请求header设置，还有数据类型{"Content-Type": "multipart/form-data"}，并且这里我们使用到了axios。

这里我就把axios直接拿过来用一下啦，以后有时间，我单独好好的和小伙伴们唠一唠怎么好好的对axios进行二次封装。

<button class="upload-current" @click="upload">上传图片</button>
......
......
// 编写上传文件的处理逻辑方法
const upload = () => {
    const file = selectFileRef.value.files[0]
    
    const formData = new FormData()
    formData.append('files', file)
    
    reader.onload = () => {
        previewUrl.value = reader.result
    }
    
    // 使用axios发起http请求
    axios({
        method: 'post',
        url: 'http://localhost:3000/uploads',
        headers: {
        'Content-Type': 'multipart/form-data'
        },
        data: formData
    }).then(res => {
        //这里是后端返回给我们的结果
    })
}

6. 编写后端代码

后端不作为我们的重点，大概给大家撸一下代码，主要是编写我们的app.js文件。还需要安装一下@koa/multer模块。

npm install @koa/multer

编写app.js

const Koa = require("koa");
const Router = require("koa-router");
const multer = require("@koa/multer");

const app = new Koa();
const router = new Router();

// 配置multer中间件
const upload = multer({
    storage: multer.diskStorage({
        //文件上传保存的路径
        destination: function (req, file, cb) {
            let dir = "./public/images"
            // 查看是否存在，不存在就创建
            if (!fs.existsSync(dir)) {
                fs.mkdirSync(dir, {
                    recursive: true
                })
            }
            // 这里的路径必须要存在
            cb(null, dir)
        },
        //修改文件名称
        filename: function (req, file, cb) {
            const fileName = file.fieldname + "-" + Date.now() + path.extname(file.originalname)
            cb(null, fileName)
        }
    })
})

// 编写图片上传的接口
router.post('/uploads', upload.single('files'), async ctx => {
    const filename = ctx.request.file.filename
    path = ctx.request.origin + '/images/' + filename
    // 这里可以去操作数据库把我们的url存入数据库中方便使用。
    ctx.body = {
        code: 200,
        message: '图片上传成功',
        url: path
    }
})
......
......
app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
    console.log('This is port 3000...')
})

小结

到此图片上传功能完成，大家可以愉快的玩耍啦。其实大家只要把该注意的点都写到基本就问题不大了。

五、总结

图片上传可以说是一个老生常谈的问题了，对于小白来说的我，每次看到就头大，但是这是不对的，我们应该有着一颗敢于探索，敢于学习的精神，于是就决心狠狠的给它啃下。当你学会一项技能的时候就会发现，原来是如此简单（这是我作为小白的客观评价，大佬勿喷，哈哈哈）。遇到困难分两种：一种是知难而退、一种是迎难而上，这也是人和人之间有差距的根本原因。

好了，今天就说道这把，大家共勉。