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

naive UI 的upload组件自定义手动上传图片的base64位

<template><n-upload ref="uploadRef" action="#" :default-upload="false" :custom-request="myUpload"><n-button>点击选择文件</n-button></n-upload><n-button @click="submitUpload"> 上传到服务器</n-button><img :src="newImg" width="200" />
</template>
<script lang="ts" setup>import { ref } from "vue";import { UpladImage, IImgBase } from "~/service/api/upLoad";import { UploadInst, UploadCustomRequestOptions } from "naive-ui";const uploadRef = ref<UploadInst | null>(null);const newImg = ref<string | undefined>();
// 自定义上传图像的方法覆盖默认方法const myUpload = ({ file }: UploadCustomRequestOptions) => {// 读取图片文件let reader = new FileReader();reader.readAsDataURL(file.file);let imgBase = {} as IImgBase;// 读取图片是异步方法,成功读取后会执行里面的内容reader.onload = function (e) {imgBase.imgBase64 = e.target?.result?.split(",")[1]; // 这就是个普通字符串// 后端接口UpladImage(imgBase).then((data) => {// 后端返回的是base64位数据,需要按下面格式显示newImg.value = "data:image/png;base64," + data.data;});};};// 点击按钮后上传到服务器的方法const submitUpload = () => {uploadRef.value!.submit();};
</script>

网上发现还是element plus的资料比较多,其实这些组件都大同小异,记录一下方便以后使用。

相关文章:

naive UI 的upload组件自定义手动上传图片的base64位

<template><n-upload ref"uploadRef" action"#" :default-upload"false" :custom-request"myUpload"><n-button>点击选择文件</n-button></n-upload><n-button click"submitUpload"> 上…...

信创办公–基于WPS的PPT最佳实践系列(表格和图标常用动画)

信创办公–基于WPS的PPT最佳实践系列&#xff08;表格和图标常用动画&#xff09; 目录应用背景操作步骤图表常用动画效果&#xff1a;擦除效果表格常用动画效果&#xff1a;轮子效果应用背景 文不如表&#xff0c;表不如图。在平时用ppt做总结时&#xff0c;我们会经常用到图…...

Spring Bean实例化和初始化的过程

承接上文Spring Bean生命周期应用程序在运行过程中能否去读取当前系统的环境变量或系统属性?这里涉及到一个非常重要的接口Environment&#xff0c;System.getenv&#xff0c;System.getProperties都是获取当前系统环境变量&#xff0c;Environment接口的实现类AbstractEnviro…...

WorkTool企微机器人接入智能问答

一、前言 最新版的企微机器人已经集成 Chat &#xff0c;无需开发可快速搭建智能对话机器人。 从官方介绍看目前集成版本使用模型为 3.5-turbo。 二、入门 创建 WorkTool 机器人 你可以通过这篇快速入门教程&#xff0c;来快速配置一个自己的企微机器人。 实现的流程如图&…...

C导入正则库问题

环境 操作系统:win11 专业版 gcc: gcc (x86_64-posix-seh-rev0, Built by MinGW-W64 project) 8.1.0 编辑器&#xff1a;vscode 要求 在c中使用正则表达式 遇到的问题以及解决思路 C标准中并没有正则表达式库 从其他地方下载正则表达式库即可。 http://gnuwin32.sourcefo…...

尚融宝05-Node.js入门

目录 一、Node.js的概念 1、JavaScript引擎 2、什么是Node.js 二、下载和安装 1、下载和安装 2、查看安装是否成功 三、初始Node.js程序 1、运行一个程序 常见问题 2、文件的读取 3、服务器端程序 三、Node.js的作用 1、Node.js的应用场景 2、BFF 解决什么问题 …...

「SAP ABAP」OPEN SQL(八)【WHERE语句大全】

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言A…...

Ribbon负载均衡的原理(源码分析)

SpringCloud底层其实是利用了一个名为Ribbon的组件&#xff0c;来实现负载均衡功能的。1&#xff09;LoadBalancerIntercepor可以看到这里的intercept方法&#xff0c;拦截了用户的HttpRequest请求&#xff0c;然后做了几件事&#xff1a;1.request.getURI()&#xff1a;获取请…...

用sql计算两个经纬度坐标距离(米数互转)

目录 一、sql示例&#xff08;由近到远&#xff09; 二 、参数讲解 三、查询效果 - 距离&#xff08;公里 / 千米&#xff09; 四、查询效果 - 距离&#xff08;米&#xff09; 五、距离四舍五入保留后2位小数&#xff08;java&#xff09; 一、sql示例&#xff08;由近到远…...

C语言详解KMP算法

如果给你一个字符串 和 该字符串的一个子字符串 你能否快速找出该子字符串的所在位置我猜 这里会有一群杠精 说可以找到 真的吗 那下面这个字符串你可以一眼看出来吗你能找出来吗 如果能 算你眼神好 如果不能 那就看看接下来我怎么做你有想到暴力求解法吗&#xff1f;——来自百…...

redis在window上安装与自启动

需求&#xff1a; 客户window服务器使用redis&#xff0c;需要配置成在window服务中&#xff0c;并且可以随着电脑自启动服务。 下载 https://github.com/tporadowski/redis/releases打开上面的下载地址&#xff0c;这里我们下载zip压缩版本。 解压到待安装目录下&#xff…...

字符串匹配【BF、KMP算法】

文章目录:star:BF算法代码实现BF的改进思路:star:KMP算法&#x1f6a9;next数组&#x1f6a9;代码实现优化next数组最终代码⭐️BF算法 BF算法&#xff0c;即暴力(Brute Force)算法&#xff0c;是普通的模式匹配算法&#xff0c;BF算法的思想就是将主串S的第一个字符与模式串P…...

Leetcode.1616 分割两个字符串得到回文串

题目链接 Leetcode.1616 分割两个字符串得到回文串 Rating &#xff1a; 1868 题目描述 给你两个字符串 a和 b&#xff0c;它们长度相同。请你选择一个下标&#xff0c;将两个字符串都在 相同的下标 分割开。由 a可以得到两个字符串&#xff1a; aprefix和 asuffix&#xff0c…...

剑指 Offer II 033. 变位词组

题目链接 剑指 Offer II 033. 变位词组 mid 题目描述 给定一个字符串数组 strs&#xff0c;将 变位词 组合在一起。 可以按任意顺序返回结果列表。 注意&#xff1a;若两个字符串中每个字符出现的次数都相同&#xff0c;则称它们互为变位词。 示例 1: 输入: strs [“eat”,…...

spring-cloud-sentinel ---流控算法---review

计数器算法 计数器算法&#xff0c;限定每个固定时间能处理的请求总数&#xff0c;例如1分钟100&#xff0c;如果在第一个一分钟&#xff0c;总共请求60次&#xff0c;接着第二个一分钟&#xff0c;counter又会从0 开始技术&#xff0c;如果在1.5分钟的时候&#xff0c;达到了…...

1.浅析NIO 多路复用器selector

一&#xff1a;IO基本介绍 Java共支持3种网络编程IO模式&#xff1a;BIO&#xff0c;NIO&#xff0c;AIO 0.Java对BIO、NIO、AIO的支持&#xff1a; Java BIO &#xff1a; 同步并阻塞&#xff0c;服务器实现模式为一个连接一个线程&#xff0c;即客户端有连接请求时服务器端…...

Day920.结构化日志业务审计日志 -SpringBoot与K8s云原生微服务实践

结构化日志&业务审计日志 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于结构化日志&业务审计日志的内容。 1、什么是结构化日志 结构化日志&#xff08;Structured Logging&#xff09;是一种将日志信息组织为结构化数据的技术。 传统的日志通常是一些文…...

前端代码复用学习笔记:整洁架构与清晰架构

基础代码的复用往往比较简单&#xff0c;但是业务代码的复用通常是困难的&#xff0c;如果没有特殊的手段去治理项目会逐渐发展为难以维护的巨石应用&#xff0c;按照维基百科记载&#xff0c;代码的复用形式主要有三种&#xff0c;程序库&#xff0c;应用框架&#xff0c;设计…...

【python刷题】leecode官方提示“->“,“:“这些符号是什么意思?什么是Type Hints?

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于海外某世界知名高校就读计算机相关专业。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。…...

【华为OD机试真题2023 JAVA】最佳对手

华为OD机试真题,2023年度机试题库全覆盖,刷题指南点这里 最佳对手 知识点排序DFS搜索回溯 时间限制:1s 空间限制:256MB 限定语言:不限 题目描述: 游戏里面,队伍通过匹配实力相近的对手进行对战。 但是如果匹配的队伍实例相差太大,对于双方游戏体验都不会太好。 给定n个…...

OpenCV实战:从相机响应函数(CRF)到HDR图像合成的完整流程解析

1. 相机响应函数(CRF)基础解析 第一次听说相机响应函数(CRF)时&#xff0c;我也是一头雾水。简单来说&#xff0c;CRF就是描述相机如何把真实世界的光线强度(L)转换成图像像素值(B)的数学关系。想象一下&#xff0c;你拿着手机对着同一个场景拍三张照片&#xff1a;一张很暗、一…...

西门子1200控制下的单部11层电梯仿真系统:完全电脑操作、清单与组态HMI界面解析

.单部11层电梯&#xff0c;基于西门子1200 不用实物即可仿真&#xff0c;仅需一台电脑&#xff0c;欢迎学习 清单&#xff1a;plc程序HMI组态画面wincc编写电气接线图硬件框架图io表报告 备需要报告的另加&#xff0c;主讲图纸不会细讲搞电梯仿真这事儿吧&#xff0c;说难也不…...

3步搭建JNPF工作流:新手也能玩转全流程类型

接触过不少刚入门低代码的开发和企业数字化人员&#xff0c;一提搭建工作流就犯怵&#xff1a;分不清流程类型适配场景&#xff0c;摸不透决策流的规则配置&#xff0c;搞不定自由流的灵活流转&#xff0c;最后要么搭出的流程适配性差&#xff0c;要么冗余臃肿跑不通。 其实基于…...

别再死记公式了!用TL072运放设计带通滤波器,调出干净正弦波的实战心得与误区盘点

TL072运放带通滤波器实战&#xff1a;从波形失真到纯净正弦波的调试艺术 当你第一次用TL072搭建带通滤波器时&#xff0c;是否也遇到过这样的场景&#xff1a;按照教科书上的公式计算参数&#xff0c;焊接好电路&#xff0c;示波器上却显示着畸形的波形——要么顶部扁平像被削峰…...

微信聊天记录年度报告怎么生成?实测这款工具,一键导出HTML还能做可视化分析

从数据到故事&#xff1a;用专业工具打造你的微信聊天年度可视化报告 微信聊天记录早已不只是简单的文字交流&#xff0c;它们承载着人际关系的发展脉络、重要时刻的见证以及日常生活的点滴。将这些碎片化的对话转化为结构化的年度报告&#xff0c;不仅能帮助我们回顾过去一年…...

微信聊天记录永久保存终极指南:WeChatMsg免费工具完整解决方案

微信聊天记录永久保存终极指南&#xff1a;WeChatMsg免费工具完整解决方案 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/…...

数据主权时代,企业即时通讯厂商选型推荐

BeeWorks作为企业级私有化 IM&#xff0c;主打安全可控、深度协同、信创适配&#xff0c;在政企、军工、金融等强合规场景口碑突出。BeeWorks 定位为安全专属数字化协作平台&#xff0c;核心是私有化部署 全链路安全 业务深度融合&#xff0c;区别于通用 SaaS IM。1. 核心架构…...

从‘翻车’到稳定:手把手教你用Matlab极点配置驯服小车倒立摆(附Simulink模型)

用Matlab极点配置实现小车倒立摆的精准控制&#xff1a;从理论到Simulink实战 倒立摆系统作为控制理论中的经典案例&#xff0c;完美展现了动态系统稳定控制的挑战与魅力。想象一下&#xff0c;一根垂直向上的杆子放在移动小车上&#xff0c;任何微小的扰动都会导致杆子倾倒——…...

SQLite在线查看器:浏览器中的数据库管理革命

SQLite在线查看器&#xff1a;浏览器中的数据库管理革命 【免费下载链接】sqlite-viewer View SQLite file online 项目地址: https://gitcode.com/gh_mirrors/sq/sqlite-viewer 在数据驱动的时代&#xff0c;SQLite数据库无处不在——从移动应用到桌面软件&#xff0c;…...

Inconsolata字体深度解析:从代码美学到专业排版的完整方案

Inconsolata字体深度解析&#xff1a;从代码美学到专业排版的完整方案 【免费下载链接】Inconsolata Development repo of Inconsolata Fonts by Raph Levien 项目地址: https://gitcode.com/gh_mirrors/in/Inconsolata 在编程世界中&#xff0c;字体的选择远不止是审美…...