上传图片,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.rhkb.cn/news/376634.html

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

相关文章

【数组、特殊矩阵的压缩存储】

目录 一、数组1.1、一维数组1.1.1 、一维数组的定义方式1.1.2、一维数组的数组名 1.2、二维数组1.2.1、二维数组的定义方式1.2.2、二维数组的数组名 二、对称矩阵的压缩存储三、三角矩阵的压缩存储四、三对角矩阵的压缩存储五、稀疏矩阵的压缩存储 一、数组 概述&#xff1a;数…

基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件

基于Vue和UCharts的前端组件化开发&#xff1a;实现高效、可维护的词云图与进度条组件 摘要 随着前端技术的迅速发展和业务场景的日益复杂&#xff0c;传统的整块应用开发方式已无法满足现代开发的需求。组件化开发作为一种有效的解决方案&#xff0c;能够将系统拆分为独立、…

SpringCoud组件

一、使用SpringCloudAlibaba <dependencyManagement><dependencies><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2023.0.1.0</version><…

纯净IP的重要性解析与测评分析

作为连接互联网世界的桥梁&#xff0c;IP地址的纯净度不仅关乎网络访问的速度与稳定性&#xff0c;更是影响着数据安全与隐私保护。今天&#xff0c;我们将带您深入探索纯净IP的重要性&#xff0c;并分享我们对芝麻HTTP与巨量IP这两家提供纯净SOCKS5代理服务的深度测评分析。 一…

ESP32的I2S引脚及支持的音频标准使用说明

ESP32 I2S 接口 ESP32 有 2 个标准 I2S 接口。这 2 个接口可以以主机或从机模式&#xff0c;在全双工或半双工模式下工作&#xff0c;并且可被配置为 8/16/32/48/64-bit 的输入输出通道&#xff0c;支持频率从 10 kHz 到 40 MHz 的 BCK 时钟。当 1 个或 2 个 被配置为主机模式…

AWS-WAF-Log S3存放,通过Athena查看

1.创建好waf-cdn 并且设置好规则和log存储方式为s3 2. Amazon Athena 服务 使用 &#xff08;注意s3桶位置相同得区域&#xff09; https://docs.aws.amazon.com/zh_cn/athena/latest/ug/waf-logs.html#waf-example-count-matched-ip-addresses 官方文档参考,建一个分区查询表…

自定义波形图View,LayoutInflater动态加载控件保存为本地图片

效果图&#xff1a; 页面布局&#xff1a; <?xml version"1.0" encoding"utf-8"?><LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:la…

硬盘模式vmd怎么改ahci_电脑vmd改ahci模式详细步骤

最近有很多网友问&#xff0c;我新买的电脑安装原版win10或win11找不到驱动器呀&#xff0c;进入第三方pe又找不到硬盘&#xff0c;找到硬盘安装后又出现安装蓝屏的情况&#xff0c;新机器怎么回事呀&#xff1f;这位网友内心有点崩溃&#xff0c;不知道啥原因。其实这些都是由…

MySQL实战45讲学习笔记(持续更新ing……)

文章目录 一、基础架构&#xff1a;一条SQL查询语句是如何执行的&#xff1f;概览连接器查询缓存分析器优化器执行器 二、日志系统&#xff1a;一条SQL更新语句是如何执行的&#xff1f;redo logbinlog两阶段提交 一、基础架构&#xff1a;一条SQL查询语句是如何执行的&#xf…

力扣每日一题:3011. 判断一个数组是否可以变为有序

力扣官网&#xff1a;前往作答&#xff01;&#xff01;&#xff01;&#xff01; 今日份每日一题&#xff1a; 题目要求&#xff1a; 给你一个下标从 0 开始且全是 正 整数的数组 nums 。 一次 操作 中&#xff0c;如果两个 相邻 元素在二进制下数位为 1 的数目 相同 &…

STM32G4 DMA的使用(寄存器开发)

下面以STM32G474为例&#xff0c;使用DMA来存储USART1的接收数据。 1. 查看硬件支持 首先查看要使用的DMA支持的通道数&#xff0c;在手册中有如下说明。 根据上图可以看到&#xff0c;对于不同的设备类型有不同的DMA通道数量。设备类型分类如下图所示。 我使用的是STM32G474…

【Three.js基础学习】16.Physice

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 课程回顾 物理库 3D Ammo.js Cannon.js Oimo.js 2D Matter.js P2.js Planck.js Box2D.js 补充:一些看似3D的效果实际使用2D库来实现的 物理 和 three.js的结合 概念补充…

雷达视频采集卡 HPx-410

产品简介 雷达视频采集卡 HPx-410&#xff0c;应用于接入导航雷达数据&#xff0c;导航雷达视频&#xff0c;适用于JRC雷达、古野furuon雷达、Sperry雷达等多种型号的雷达。 HPx-410 可以接入导航雷达数据&#xff0c;引入导航雷达原始回波&#xff0c;然后将雷达视频采集到计…

html5——列表、表格

目录 列表 无序列表 有序列表 自定义列表 表格 基本结构 示例 表格的跨列 表格的跨行 列表 无序列表 <ul>【声明无序列表】 <li>河间驴肉火烧</li>【声明列表项】 <li>唐山棋子烧饼</li> <li>邯郸豆沫</li> <l…

python爬虫加入进度条

安装tqdm和requests库 pip install tqdm -i https://pypi.tuna.tsinghua.edu.cn/simplepip install requests -i https://pypi.tuna.tsinghua.edu.cn/simple带进度条下载 import time # 引入time模块&#xff0c;用于处理时间相关的功能 from tqdm import * # 从tqdm包中…

基于SpringBoot+Hadoop+python的物品租赁系统(带1w+文档)

基于SpringBootHadooppython的物品租赁系统(带1w文档) 基于SpringBootHadooppython的物品租赁系统(带1w文档) 物品租赁系统是电子、信息技术相结合&#xff0c;是一种必然的发展趋势。以互联网为基础&#xff0c;以服务于广大用户为目的&#xff0c;发展整体优势&#xff0c;扩…

Vue3 pdf.js将二进制文件流转成pdf预览

好久没写东西&#xff0c;19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件&#xff0c;如果Vue2换成Vue3了&#xff0c;顺带来一篇文章&#xff0c;pdf.js这个东西用来解决内网pdf预览&#xff0c;是个不错的选择。 首先去pdfjs官网&#xff0c;下载需要的文件 然后将下载…

数据仓库哈哈

数据仓库 基本概念数据库&#xff08;database&#xff09;和数据仓库&#xff08;Data Warehouse&#xff09;的异同 整体架构分层架构方法论ER模型&#xff08;建模理论&#xff09;维度模型 何为分层第一层&#xff1a;数据源&#xff08;ODS ER模型&#xff09;设计要点日志…

python中的os模块和shutil模块

目录 os 1. 获取当前脚本绝对路径 2.获得工作路径&#xff1b; 3.该路径文件和目录 4.walk&#xff0c;查看目录下所有的文件&#xff08;含子孙文件&#xff09; 5.创建文件夹 6.os.makedirs(path) 7.路径拼接 8. 获取当前文件的上级目录 9.判断路径是否存在 10.是…

一 GD32 MCU 开发环境搭建

GD32 系列为通用型 MCU &#xff0c;所以开发环境也可以使用通用型的 IDE &#xff0c;目前使用较多的是 KEIL、 IAR 、 GCC 和 Embedded Builder &#xff0c;客户可以根据个人喜好来选择相应的开发环境。 目录 1、使用 Keil 开发 GD32 目前市面通用的MDK for ARM版本有Kei…