Vue3+Koa2实现图片上传(不再畏惧)

news/2025/3/17 3:02:29/

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

文章目录

    • 一、技术摘要
    • 二、图片上传流程概述
      • 1. 前端
      • 2. 后端
    • 三、项目搭建
      • 前端
        • 1. 初始化Vue
      • 后端(koa2)
        • 1. 全局安装脚手架
        • 2. 初始化项目
        • 3. 运行
    • 四、开始撸代码
      • 1. 编写html骨架
      • 2. 定义回显元素
      • 3. 编写选择按钮逻辑
      • 4. 回显选择的图片
      • 5. 编写上传图片按钮
      • 6. 编写后端代码
      • 小结
    • 五、总结

一、技术摘要

本次实现的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]// 把图片转成base64const 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.filenamepath = 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...')
})

小结

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

五、总结

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

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


http://www.ppmy.cn/news/1340700.html

相关文章

C++——日期类

前言&#xff1a;哈喽小伙伴们&#xff0c;在上一篇文章中我们对C类与对象的前半段知识进行了简单的分享&#xff0c;其中比较重要的莫过于C类的六个默认成员函数。 所以这篇文章&#xff0c;我们通过实现一个完整的日期的操作&#xff0c;来对这些成员函数有一个更加深入的理…

Python与Go中详细的异常处理机制|面试题

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…

关于java的异常

关于java的异常 我们在上一篇文章中&#xff0c;了解了java的内部类&#xff0c;内部类的用法等&#xff0c;本篇文章中&#xff0c;我们去了解一下java中的异常&#xff0c;这也是非常关键的一个知识&#x1f600; 一、什么是异常 比如我们平时去上班&#xff0c;按时去坐地…

协作办公开源神器:ONLYOFFICE

目录 前言ONLYOFFICE为什么选择ONLYOFFICE强大的文档编辑功能多种协作方式多人在线协同支持跨端多平台连接器安全性极高本地部署 ONLYOFFICE 8.0版本震撼来袭可填写的 PDF 表单显示协作用户头像更新插件界面设计更快更强大 总结 前言 近几年来&#xff0c;随着互联网技术的不断…

自学PyQt6杂记索引

文章目录 📖 介绍 📖🏡 安装 🏡📒 使用 📒📝 QtCore📝 QtGui📝 QtWidgets📝 QToolTip📝 信号和槽📝 QtDBus📝 QtNetwork📝 QtHelp📝 QtXml📝 QtSvg

virtualBox虚拟机安装ubuntu后的必要配置

1. 使能双向copy 粘贴功能。在device menu的 shared clipboard项, 选bidirectional. 2.启用共享文件夹。 在device 菜单的 shared folder 项配置&#xff0c; (对于日期乱码问题和命令行打不开的问题请见ubuntu18.04安装后时间日期乱码及terminal打不开解决方法_电脑日期变成…

-代码分享-

快速排序 int Qsortkey1(int a[], int left, int right) { //挖坑法 int begin left, end right; //三数取中 int tmp san(a, left, right); Swap(&a[tmp], &a[begin]);int key a[begin]; int keyi begin; int pivot begin;while (begin < end) {//向左找小w…

【Vue3+Vite】路由机制router 快速学习 第四期

文章目录 路由简介路由是什么路由的作用 一、路由入门案例1. 创建项目 导入路由依赖2. 准备页面和组件3. 准备路由配置4. main.js引入router配置 二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结 路由简介 路由是什么 路由就是根据不同的 URL…