vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 Koa2图片上传

Vue3+Koa2实现图片上传功能的示例代码

作者：勇宝趣学前端

这篇文章主要为大家详细介绍了如何使用Vue3和Koa2实现图片上传功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

一、技术摘要

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

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

二、图片上传流程概述

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

1. 前端

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

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

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

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

最后的最后就是我们的请求头要改为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...')
})

小结

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

五、总结

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

以上就是Vue3+Koa2实现图片上传功能的示例代码的详细内容，更多关于Vue3 Koa2图片上传的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文