当前位置: 首页 > news >正文

Vue3+ElementPlus+koa2实现本地图片的上传

一、示例图

二、实现过程

  1. 利用Koa2书写提交图片的后台接口

这个模块是我写的项目中的其中一个板块——上传图片,这个项目的后台接口主要是是使用了后端的Koa2框架,前端小伙伴想要试着自己书写一些增删改查的接口可以从这个入手,Koa2用来了解后端的还是很好上手的,当你试着从接口的书写到前端页面的实现都由自己完成时,你会对项目的整个流程有一个更加清晰的认识,而不再是像往常一样通过接口获取数据,然后渲染到页面上。

当你自己完成了接口的相关功能,你会更加明白为什么我们在使用后端接口时要传相关的参数,这些参数又是怎么样在数据库中查找的,对整体项目有一个更加全方面的考虑,例如一个添加购物车并不是我们想象的那么简单,其中我们添加的数据其实时在数据库的相关表中增加了一条记录,所以才会有需要再次调用获取购物车信息的接口。

至于这个完整的项目(关于xxxx的后台管理系统,主要使用Vite+Vue3+Element-plus+TypeScript实现)何时和大家分享,我还需要再整理一下,随后会放到gitee上的,欢迎有兴趣的小伙伴翻阅。

言归正传:上传图片的后端接口到底如何实现呢?

1.1 安装 koa/multer

npm i --save @koa/multer

koa/multer 是Koa中的一个中间件,用于上传文件使用,具体见https://www.itying.com/koa/article-index-id-90.html

1.2具体实现代码

/*** 上传模块*/
const router = require('koa-router')()
const fs = require('fs')
const path = require('path')
const multer = require('@koa/multer');
router.prefix('/uploads') //接口的地址前缀
//配置    
let 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) {let fileName = file.fieldname + "-" + Date.now() + path.extname(file.originalname)cb(null, fileName)}})
})// 实现图片的上传
router.post('/img', upload.single('myfile'), async ctx => {console.log(ctx);let path = ctx.request.file.pathconsole.log(path);path = ctx.request.origin + '' + path.replace(/public/, '');ctx.body = {data: path,code: 1,msg: "文件上传成功"}
});
module.exports = router
相关参数解释:
path: 因为这里主要是实现将图片上传至后台的public/image文件夹中,所以需要指定图片上传的路径
router.prefex:指定接口的地址前缀,有利于区别我们是在那个具体的模块下是写的接口
  1. 前端使用接口完成数据的渲染

如往常一样,我们仍然需要使用调用后端的接口,当然这个大前提是你在这之前进行了axios封装才可以获取数据

2.1 获取数据功能函数的封装?

往常我们都是写一个请求函数拼接地址,以及请求方式传递的数据,然后调用接口,这里不需要了,在组件库Element-Plus中有相关的组件供我们使用,其中有很多的api可方便解决这个问题。例如这里我们可以设置一个action,这个参数就是用来填写上传图片的地址。详见官方组件https://element-plus.gitee.io/zh-CN/component/upload.html

组件库中有很多上传图片的方式,这里以拖拽上传为例

<template><el-uploadclass="upload-demo"dragaction="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"multiple><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">Drop file here or <em>click to upload</em></div><template #tip><div class="el-upload__tip">jpg/png files with a size less than 500kb</div></template></el-upload>
</template><script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
</script>

2.2具体实现代码

<template><img :src="realImg" alt="" /><el-uploadclass="upload-demo"dragaction="/api/uploads/img"multiplename="myfile":headers="result":on-success="sucUpload"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">选择图片 或者 <em>上传图片</em></div><template #tip><div class="el-upload__tip">jpg/png files with a size less than500kb(jpg/pgn格式的文件大小不可超过500kb)</div></template></el-upload>
</template><script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
// 获取请求头
let userToken = window.sessionStorage.getItem("userToken") || "";
let result = reactive({Authorization: "Bearer " + JSON.parse(userToken),
});let realImg: any = ref("");
// 上传图片成功的回调
const sucUpload = (res: any) => {console.log(res, "上传图片的结果");if (res) {window.sessionStorage.setItem("imgList", res.data);}
};onMounted(() => {realImg.value = window.sessionStorage.getItem('imgList');
});
</script><style scoped>
/*图片的样式*/
img {width: 300px;height: 200px;
}
</style>

总结

以上就是我的一些分享了,很不好意思前端时间一直没有继续更新,昨晚打开私信居然看到有小伙伴问我为啥不继续写了,一呢是因为这段时间事情很多,就把这一块儿给搁置了,二来呢,我没有想过我写的东西会有人看,嗯……总而言之,之后会继续更新的,继续把我所知道的分享给大家,共同进步吧。

最后,依旧祝屏幕前的你健康快乐、平安幸福!Bye

相关文章:

Vue3+ElementPlus+koa2实现本地图片的上传

一、示例图二、实现过程利用Koa2书写提交图片的后台接口这个模块是我写的项目中的其中一个板块——上传图片&#xff0c;这个项目的后台接口主要是是使用了后端的Koa2框架&#xff0c;前端小伙伴想要试着自己书写一些增删改查的接口可以从这个入手&#xff0c;Koa2用来了解后端…...

常见漏洞之 Fastjson

数据来源 01 Fastjson相关介绍 》Fastjson概述 》Fastjson历史漏洞 02 Fastson的识别与漏洞发现 》Fastjson寻找 》Fastjson漏洞发现&#xff08;利用 dnslog&#xff09; 03 修复建议 建议1&#xff1a;使用fastjson1.2.83版本&#xff1b; Github地址&#xff1a;https:…...

绕过Nginx Host限制

目录绕过Nginx Host限制SNI第三种方法&#xff1a;总结绕过Nginx Host限制 SNI SNI&#xff08;Server Name Indication&#xff09;是 TLS 的扩展&#xff0c;这允许在握手过程开始时通过客户端告诉它正在连接的服务器的主机名称。 作用&#xff1a;用来解决一个服务器拥有…...

Visual Studio 2022 常用快捷键,记录一下别忘记~

Visual Studio 2022 常用快捷键&#xff0c;记录一下别忘记~ CtrlEC 注释代码 CtrlEU 取消注释代码 CtrlED 格式化全部代码 CtrlShiftA 新建类 CtrlRG 删除无效Using CtrlH 批量替换 CtrlG 跳转到指定行 CtrlEE 在交互窗口中运行选中代码(很实用) AltEnter 快速引用 …...

软件测试回顾---重点知识

软件测试重点知识回顾 8.1.1软件测试的目的是 尽可能的发现程序中的错误并不是发现所有的错误并不是证明程序是错误的也不是为了调试程序8.1.2白盒测试根据什么设置测试用例&#xff1f;黑盒测试根据什么设置测试用例&#xff1f; 白盒测试根据内部逻辑来设计的黑盒测试根据的是…...

2D图像处理:2D Shape_Base_Matching_缩放_旋转_ICP_显示ROI

文章目录 调试结果参考调试说明问题0:并行运行问题问题1:模板+Mask大小问题问题2:组合缩放和旋转问题3:可以直接将计算边缘的代码删除问题4:如何在原始图像上显示匹配到的ROI问题5:计算的原始旋转角度不需要判断,直接可以在ICP中使用问题6:绘制坐标轴问题7:绘制ROI调试…...

HTTP、HTTPS

目录 1.HTTP 1.1.概述 1.2.报文结构 1.2.1.请求报文 1.2.2.响应报文 1.3.方法 2.HTTPS 1.HTTP 1.1.概述 HTTP&#xff0c;超文本传输协议&#xff0c;WEB体系选用了该协议作为应用层协议。 1.2.报文结构 1.2.1.请求报文 HTTP的请求报文&#xff08;request&#xff0…...

计算机网络之http03:HTTPS RSA握手解析

不同的秘钥交换算法,握手过程可能略有差别 上文对HTTPS四次握手的学习 SSL/TLS Secure Sockets Layer/Transport Layer Security 协议握手过程 四次通信&#xff1a;请求服务端公钥 2次 秘钥协商 2次 &#xff08;1&#xff09;ClientHello请求 客户端向服务端发送client…...

一款针对EF Core轻量级分表分库、读写分离的开源项目

更多开源项目请查看&#xff1a;一个专注推荐.Net开源项目的榜单 在项目开发中&#xff0c;如果数据量比较大&#xff0c;比如日志记录&#xff0c;我们往往会采用分表分库的方案&#xff1b;为了提升性能&#xff0c;把数据库查询与更新操作分开&#xff0c;这时候就要采用读写…...

Linux环境变量讲解

目录 环境变量 alias命令 type命令 变量分类 Linux最主要的全局环境变量 环境变量 变量是计算机系统用于保存可变数值的数据类型 在Linux中&#xff0c;一般变量都是大写&#xff0c;命令是小写 在Linux中&#xff0c;变量直接使用&#xff0c;不需要定义&#xff08;更快…...

iptables和nftables的使用

文章目录前言iptable简介iptable命令使用iptables的四表五链nftables简介nftables命令的时候nftables与iptables的区别iptables-legacy和iptables-nft实例将指定protocol:ip:port的流量转发到本地指定端口前言 本文展示了&#xff0c;iptables和nftable命令的使用。 # 实验环…...

中小学信息学相关编程比赛清单及报名网站汇总(C++类)

1、NOI系列比赛(CSP-J CSP-S NOIP NOI APIO CTSC IOI ISIJ等) NOI官网 NOI全国青少年信息学奥林匹克竞赛https://www.noi.cn/ 2、蓝桥杯青少年创意编程大赛 https://www.lanqiaoqingshao.cn/home 3、中国电子协会考评中心...

06Makefile

Makefile 1、Makefile简介 一个工程中的源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的规则来指定哪些文件需要先编译&#xff0c;哪些文件需要后编译&#xff0c;哪些文件需要重新编译&#xff0c;甚至于进行更复杂…...

【C++】模板初阶

&#x1f345;讨厌废话&#xff0c;直接上车 ☃️1.泛型编程 void Swap(int& left, int& right) { int temp left; left right; right temp; } void Swap(double& left, double& right) { double temp left; left right; right temp; } void Swap(char&…...

vue+nodejs考研资料分享系统vscode - Visual Studio Code

前端技术&#xff1a;nodejsvueelementui,视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正常。 Express 框架于Node运行环境的Web框架, 目 …...

LeetCode_单周赛_332

6354. 找出数组的串联值 题意 将数组首尾元素接在一起&#xff0c;就是串联值。 串联之后删除&#xff0c;如果只剩下一个元素&#xff0c;加上这个元素即可 双指针&#xff0c;从首和尾向中间移动即可 code **注意&#xff1a;**用 long 没看题目用了 int wa了一发 clas…...

[LeetCode周赛复盘] 第 332 场周赛20230212

[LeetCode周赛复盘] 第 332 场周赛20230212 一、本周周赛总结二、 [Easy] 6354. 找出数组的串联值1. 题目描述2. 思路分析3. 代码实现三、[Medium] 6355. 统计公平数对的数目1. 题目描述2. 思路分析3. 代码实现四、[Medium] 6356. 子字符串异或查询1. 题目描述2. 思路分析3. 代…...

C++轻量级RPC库RpcCore

C轻量级的RPC库&#xff0c;可用于任何项目中&#xff0c;甚至单片机。 方便平台直接相互进行功能调用。 基于asio的实现 asio_net 也可用在esp32适用于ESP32/ESP8266的实现 esp_rpc 目前也有一些轻量的库&#xff0c;参考了protobuf&#xff08;或者依赖它&#xff09;&…...

Mysql的视图

视图的特点&#xff1a; 1.视图可以看做一个虚拟的表&#xff0c;本身是不存储数据的。 视图的本质可以看作是存储起来的select语句 2.视图中涉及到的表都统称为基表 3.针对视图多DML操作&#xff0c;会影响到对应基表中的数据。反之亦然 4.视图本身的删除&#xff0c;不会…...

2/12考试总结

时间安排 8:30–8:50 读题&#xff0c;T1 不知道是个啥,T2是个dp &#xff0c;T3可能也是 dp 之类的。 8:50–9:30 T1&#xff0c;读了好几遍才理解了题意&#xff0c;对于部分分有爆搜。考虑正解&#xff0c;想到预处理后O(1) 查询&#xff0c;问题是如何由已知的信息得到所有…...

第三章虚拟机的克隆,快照,迁移删除

1.虚拟机的克隆 如果你已经安装了一台linux操作系统&#xff0c;你还想再更多的&#xff0c;没有必要再重新安装&#xff0c;你只需要克 隆就可以&#xff0c;看演示。 方式1&#xff0c;直接拷贝一份安装好的虚拟机文件,再用虚拟机打开这个文件方式2&#xff0c;使用vmware的…...

华为OD机试 - 任务总执行时长(Python)| 真题含思路

任务总执行时长 题目 任务编排服务负责对任务进行组合调度。 参与编排的任务又两种类型, 其中一种执行时长为taskA, 另一种执行时长为taskB。 任务一旦开始执行不能被打断,且任务可连续执行。 服务每次可以编排 num 个任务。 请编写一个方法,生成每次编排后的任务所有可…...

LeetCode 热题 C++ 114. 二叉树展开为链表

给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&#xf…...

Spring的事务控制-基于AOP的声明式事务控制

Spring的事务控制-基于AOP的声明式事务控制 Spring事务编程概述 事务是开发中必不可少的东西&#xff0c;使用JDBC开发时&#xff0c;我们使用connection对事务进行控制&#xff0c;使用MyBatis时&#xff0c;我们使用SqlSession对事务进行控制&#xff0c;缺点就是&#xff…...

SSO(单点登陆)

Single Sign On 一处登陆、处处可用 0、前置概念&#xff1a; 1&#xff09;、单点登录业务介绍 早期单一服务器&#xff0c;用户认证。 缺点&#xff1a;单点性能压力&#xff0c;无法扩展 分布式&#xff0c; SSO(single sign on)模式 解决 &#xff1a; 用户身份信息独…...

线程和QObjects

QObject的可重入性&#xff1a; QThread继承了QObject&#xff0c;它发出信号以指示线程开始或完成执行&#xff0c;并提供一些插槽。 QObjects可以在多个线程中使用发出调用其他线程中槽的信号&#xff0c;并将事件发布到在其他线程中“活动”的对象。这是可能的&#xff0…...

最新中文版FL Studio21水果软件下载安装图文教程

FL Studio是目前流行广泛使用人数最多音乐编曲制作软件&#xff0c;这款软件相信广大网友并不陌生&#xff0c;今天带来的是FL中文版本&#xff0c;所有的功能都能在线编辑&#xff0c;用户直接就能操作&#xff0c;同时因为是21水果是最新版&#xff0c;所以增加了新的功能&am…...

pandas数据分析35——多个数据框实现笛卡尔积

什么是笛卡尔积。就是遍历所有组合的可能性。 比如第一个盒子有[1,2,3]三个号码球&#xff0c;第二个盒子有[4,5]两个号码球。那么从每个盒子里面分别拿一个球共有3*2两种可能性&#xff0c;其集合就是{[1,4],[2,4],[3,4],[1,5],[2,5],[3,5]},这个就是笛卡尔积。 三个盒子也是…...

【C语言学习笔记】:数组倒序排列,数组倒置

数组倒置就是将数组元素中的数据倒过来&#xff01; 举个例子&#xff0c;比如下面程序&#xff1a; #include <stdio.h>int main(void) { int a[5] {1, 2, 3, 4, 5}; int b[5]; //用来存放倒置后的数据 int i, j; for (i0, j4; i<5, j>0; i, --j)…...

sni+tomcat漏洞复现

sni SNI产生背景 SSL以及TLS&#xff08;SSL的升级版&#xff09;为客户端与服务器端进行安全连接提供了条件。但是&#xff0c;由于当时技术限制&#xff0c;SSL初期的设计顺应经典的公钥基础设施 PKI(Public Key Infrastructure)设计&#xff0c;PKI 认为一个服务器只为一个…...

做鸭网站/如何在百度做推广

一.RF之UI自动化测试环境 1&#xff1a;通过pip安装扩展库: pip install robotframework-seleniumlibrary 2.:下载谷歌游览器和对应驱动 https://www.cnblogs.com/loved-wangwei/p/8993013.html 3.将游览器驱动放在python的目录下 比如&#xff1a;我的python安装在D:\install…...

关于单位建设网站的申请/优秀网站设计

微信聊天不但能够文字、图片&#xff0c;还能发送视频&#xff0c;给我们带来了很多趣味&#xff0c;不过此前发送的视频只能顺序播放&#xff0c;而无法拖动快进&#xff0c;又有些不便。好消息来了&#xff0c;今天iOS版微信迎来6.2.2小更新&#xff0c;针对聊天中的视频增加…...

郑州北环网站建设培训/重庆seo的薪酬水平

此文转载自&#xff1a;https://blog.csdn.net/m0_51344983/article/details/113467944#commentBox持续更新中… 7-2 小宝的幸运数组对于小宝来说&#xff0c;如果一个数组的总和能够整除他的幸运数字k&#xff0c;就是他的幸运数组&#xff0c;而其他数组小宝都很讨厌。现在有…...

怎么登录企业网站/潍坊网站建设

线程池的概念 线程池是管理线程的一个工具&#xff0c;通过线程的重复使用从而降低开销&#xff0c;提高效率。因为创建和销毁线程都很耗费时间 ThreadPoolExecutor 创建线程池需要用到一个核心类就是ThreadPoolExecutor。 先来看构造函数&#xff1a; /*** Creates a new {cod…...

wordpress k2/优化软件刷排名seo

EasyNVR流媒体解决方案 EasyNVR能够通过简单的网络摄像机通道配置&#xff0c;将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR&#xff0c;EasyNVR能够将这些视频源的音视频数据进行拉取&#xff0c;转换为RTMP/HLS&#xff0c;进行…...

建立网站专业公司吗/uc信息流广告投放

CAD软件常见问题解答&#xff0c;CAD中的工具栏不见了怎么办&#xff1f;如何清理图形问&#xff1a;AUTOCAD中的工具栏不见了怎么办&#xff1f;答&#xff1a;在工具栏处点右键&#xff0c;工具——选项——配置——重置&#xff0c;也可用命令&#xff1a;MENULOAD命令&…...