上传图片,base64改为文件流,并转给后端

需求:
在这里插入图片描述

html代码:

 <el-dialog v-model="dialogPicVisible" title="新增图片" width="500"><el-form :model="picForm"><el-form-item label="图片名称:" :label-width="100"><el-input v-model="picForm.picName" clearable /></el-form-item><el-form-item label="新增图片:" prop="img" :label-width="100"><el-uploadclass="avatar-uploader":show-file-list="false":http-request="uploadFn"><img v-if="picForm.file" :src="picForm.file" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogPicVisible = false">取 消</el-button><el-button type="primary" @click="submitPicBtn"> 确 认 </el-button></div></template></el-dialog>

这是base64转文件流的代码

// base64转文件流
function base64ToFile(base64Data, filename) {// 将base64的数据部分提取出来const parts = base64Data.split(";base64,");const contentType = parts[0].split(":")[1];let strArr = contentType.split("/");console.log('strArr',strArr)const raw = window.atob(parts[1]);// 将原始数据转换为Uint8Arrayconst rawLength = raw.length;const uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}// 使用Blob和提取出的数据内容创建一个新的Blob对象const blob = new Blob([uInt8Array], { type: contentType });// 创建一个指向Blob对象的URL,并使用这个URL创建一个File对象const blobUrl = URL.createObjectURL(blob);const newFilename = filename + '.' + strArr[1]const file = new File([blob], newFilename, { type: contentType });// 返回File对象return file;
}

这是确认提交的逻辑

function submitPicBtn() {const file = base64ToFile(picForm.file, picForm.picName);console.log('file',file)let strArr = file.type.split("/");var fileForm = new FormData();fileForm.append("classifyId", form.classifyId);fileForm.append("file", file);var newPicName = picForm.picName + "." + strArr[1];fileForm.append("picName", newPicName);axios.post("/h5htglpt/api/uploadPic", fileForm, {headers: {"Content-Type": "multipart/form-data",},}).then((res) => {console.log('res',res)if (res.data.code == "0") {ElMessage({message: "新增成功",type: "success",});dialogPicVisible.value = falsegetTreeList();}}).catch((error) => {});
}

打印上传成功后的file 注意:name需要拼接图片类型的后缀

在这里插入图片描述

这是css的代码

.demo-image .block {padding: 30px 0;text-align: center;border-right: solid 1px var(--el-border-color);display: inline-block;width: 20%;box-sizing: border-box;vertical-align: top;
}
.demo-image .block:last-child {border-right: none;
}
.demo-image .demonstration {display: block;color: var(--el-text-color-secondary);margin: 10px 0;font-weight: bold;letter-spacing: 1px;
}.avatar-uploader .avatar {width: 178px;height: 178px;display: block;
}::v-deep .avatar-uploader .el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;text-align: center;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/44214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Python进行自然语言处理

哈喽,大家好,我是木头左! 自然语言处理(Natural Language Processing,NLP)是人工智能领域的一个重要分支,它致力于使计算机能够理解、分析和生成人类语言。随着大数据和深度学习的发展,NLP在各个领域都有广泛的应用,如机器翻译、情感分析、文本摘要等。本文将介绍如何…

Windows 部署ollama

一、简介 Ollama是在Github上的一个开源项目&#xff0c;其项目定位是&#xff1a;一个本地运行大模型的集成框架&#xff0c;目前主要针对主流的LLaMA架构的开源大模型设计&#xff0c;通过将模型权重、配置文件和必要数据封装进由Modelfile定义的包中&#xff0c;从而实现大模…

模型需要从txt中长文本中精准提炼出来文字

需要从txt中长文本中精准提炼出来文字&#xff0c;比如&#xff1a;文本&#xff1a;BERT 是由 Google 提出的预训练语言模型&#xff0c;具有出色的上下文理解能力。可以用于命名实体识别 (NER)、文本分类和问答系统等任务。问题&#xff1a;BERT能完成什么任务&#xff1f;输…

Mysql ORDER BY是否走索引?

在 MySQL 中&#xff0c;ORDER BY 子句是否使用索引取决于多种因素&#xff0c;包括查询的具体情况、索引的类型和结构、查询中的其他条件等。 使用索引的情况 单列索引和 ORDER BY&#xff1a; 当 ORDER BY 子句中的列有单列索引时&#xff0c;MySQL 可以利用该索引来加速排序…

imx6ull/linux应用编程学习(15) 移植MQTT客户端库/测试

1. 准备开发环境 确保你的Ubuntu系统已经安装了必要的工具和依赖项。打开终端并运行以下命令&#xff1a; sudo apt update sudo apt install build-essential cmake git2. 获取MQTT库 git clone https://github.com/eclipse/paho.mqtt.c.git cd paho.mqtt.c3. 编译MQTT库 mk…

iOS 开发中,异步渲染和异步绘制

在 iOS 开发中&#xff0c;异步渲染&#xff08;Asynchronous Rendering&#xff09;和异步绘制&#xff08;Asynchronous Drawing&#xff09;虽然有相似之处&#xff0c;但它们并不是完全相同的概念。 异步渲染&#xff08;Asynchronous Rendering&#xff09; 异步渲染主要…

【SVN的使用- SVN的基本命令-SVN命令简写-注意事项-解决冲突 Objective-C语言】

一、SVN的更新命令:update 1.服务器如果新建了一个文件夹,yuanxing,版本变成6了, 我现在本地还只有三个文件夹,版本5, 终端里边,我们敲一个svn update, 我这儿就多了一个yuanxing文件夹, 这个就是更新,就是把服务器最新的代码下载下来, 假设服务器上大家提交了这…

react VS vue

什么是react 用于构建用户界面的js库 什么是vue 用于构建用户界面的渐进式js库 react是基于mvvm设计还是mvc设计 1、react是基于mvc设计的&#xff0c;但也不是完整的mvc模式 2、react把自己定义为view 3、组件逻辑定义为Controller层 4、虽然react不是完整的mvc模式&a…

KNIME 5.2.5 版本界面切换

1、安装完KNIME后&#xff0c;点击“Create workflow in your local space.” 2、发现是这个样子 4、进行切换。点击“menu”&#xff0c;最后点击“Switch to classic user interfaceto” 5、最终显示结果&#xff1a;

补光灯LED照明 2.7V4.2V5V升60V80V100V升压恒流芯片IC-H6902B

H6902B升压恒流芯片IC确实是一款为LED照明应用设计的稳定且可靠的解决方案。这款芯片具有以下几个显著特点&#xff1a; 高效率&#xff1a;效率高达95%以上&#xff0c;这意味着在驱动LED灯时&#xff0c;电源到LED的能量转换效率非常高&#xff0c;减少了能量损失&#xff0…

代码随想录算法训练营:30/60

非科班学习算法day30 | LeetCode452:用最少数量的箭引爆气球 &#xff0c;Leetcode435:无重叠区间 &#xff0c;Leetcode763:划分字母区间 介绍 包含LC的两道题目&#xff0c;还有相应概念的补充。 相关图解和更多版本&#xff1a; 代码随想录 (programmercarl.com)https:/…

centos磁盘空间满了-问题解决

报错问题解释&#xff1a; CentOS系统在运行过程中可能会出现磁盘空间不足的错误。这通常发生在以下几种情况&#xff1a; 系统日志文件或临时文件过大导致磁盘空间不足。 安装了大量软件或文件而没有清理无用文件。 有可能是某个进程占用了大量磁盘空间。 问题解决方法&a…

多服务下,服务与服务之间的调用(SpringCloudAlibaba入门一)

多服务下&#xff0c;服务与服务之间的调用&#xff08;SpringCloudAlibaba入门一&#xff09; 说明直接看代码 说明 在SpringBoot情况下&#xff0c;如果我们有多个子模块而且代码之间没有相互引用&#xff0c;那么子项目与子项目之间的调用方式就只能通过http请求的方式去调用…

必看!微信小程序必备证书!

微信小程序必备SSL证书。在日益增长的数字经济中&#xff0c;微信小程序已成为商家与消费者之间重要的交互平台。由于其便捷性和广泛的用户基础&#xff0c;越来越多的企业选择通过小程序来提供服务。然而&#xff0c;在开发和部署微信小程序时&#xff0c;确保数据安全是一个不…

Ubuntu22.04.4 LTS系统/安装Anaconda【GPU版】

安装过程 1.wget命令行下载 下载Anaconda并保存文件至本地指定目录 wget -c https://repo.anaconda.com/archive/Anaconda3-2023.09-0-Linux-x86_64.sh -P ~/Downloads/anaconda3 查看是否下载好了 2.安装Anaconda 2.1 bash命令安装 bash后面是anaconda3下载好的路径 bash …

学生选课管理系统(Java+MySQL)

技术栈 Java: 用于实现系统的核心业务逻辑。MySQL: 作为关系型数据库&#xff0c;用于存储系统中的数据。JDBC: 用于Java程序与MySQL数据库之间的连接和交互。Swing GUI: 用于创建图形用户界面&#xff0c;提升用户体验。 系统功能 我们的学生选课管理系统主要针对学生和管理…

AIGC 与软件开发:是助力还是取代?

《AIGC 与软件开发&#xff1a;是助力还是取代&#xff1f;》 在当今的软件开发领域&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;的崛起无疑是一场变革性的浪潮。从代码生成到错误检测&#xff0c;再到自动化测试&#xff0c;AI 工具正以前所未有的方式融入开发者…

vue3源码(六)渲染原理-runtime-core

1.依赖关系 runtime-dom 依赖于runtime-core,runtime-core 依赖于reactivity和sharedruntime-core提供跨平台的渲染方法createRenderer&#xff0c;用户可以自己传递节点渲染的渲染方法renderOptions&#xff0c;本身不关心用户使用什么APIruntime-dom提供了为浏览器而生的渲染…

MSI打包后门成安装包

目录 浏览器下载地址 启动>next 选择后门所在路径&#xff0c;和生成安装包后存放路径 next>Hidden 配置变量 Look up随便找个伪装&#xff0c;然后点击一下Creat New ​注册表Registry导入 ​点击否&#xff0c;不购买专业版 ​安装包生成成功​编辑 浏览器下…

Mybatis进阶の常用配置级联查询

2 Mybatis常用配置 mybatis-config.xml中除了可以配置数据库服务器的环境以外&#xff0c;还可以配置其他的操作&#xff0c;帮助开发人员简化配置代码。常见的配置信息有以下内容&#xff1a; 1 配置内容 SqlMapConfig.xml中配置的内容和顺序如下&#xff1a;properties&am…