使用base64通用文件上传

编写一个上传文件的组件 tuku,点击图片上传后使用FileReader异步读取文件的内容,读取完成后获得文件名和base64码,调用后端uploadApi,传入姓名和base64文件信息,后端存入nginx中,用于访问

 tuku.ts组件代码:

<template><!-- 点击后触发方法修改父组件的值 --><el-avatar :size="80" src="imgmodelValue1" @click="drawer = true" style="cursor: pointer;"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" /></el-avatar><el-drawer v-model="drawer" title="图片上传" :with-header="false"><el-upload class="avatar-uploader" :show-file-list="false" :on-change="onChange" :auto-upload="false"><el-icon class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-drawer></template><script lang="ts" setup>import { defineModel,ref} from 'vue';
import { uploadApi } from '@/api/index.ts';const modelValue = defineModel("tukuimg1")const onChange = (uploadFile:any, uploadFiles: any)=>{let name =uploadFile.name//FileReader是浏览器提供的API,用于异步读取文件的内容let reader = new FileReader()//使用readAsDataURL方法异步读取文件内容。uploadFile.raw应该是文件对象本身reader.readAsDataURL(uploadFile.raw)//设置FileReader的onload事件处理器,当读取操作完成时,这个函数会被调用,注意这里的file参数实际上是event对象reader.onload = (file)=>{callUploadApi(name,file.target?.result)}}const callUploadApi = (name:String,base64 :any)=>{uploadApi.upload.call({name,base64}).then((res: any)=>{modelValue.value = resdrawer.value = false})}const drawer = ref(false)</script><style scoped>
.avatar-uploader .avatar {width: 100px;height: 100px;display: block;
}
</style>
<style>
.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: 100px;height: 100px;text-align: center;
}
</style>

使用组件

 后端api

      

uploadService代码

package com.yy.service;import cn.hutool.core.codec.Base64;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.extra.pinyin.PinyinUtil;
import com.yy.dto.UploadDto;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;@Service
public class UploadService {@Value("${upload.path}")private String uploadPath;@Value("${upload.domain}")private  String uploadDomain;public String uploadAll(UploadDto uploadDto) {String name = uploadDto.getName();String base64 = uploadDto.getBase64();String[] base64Array = StrUtil.splitToArray(base64, "base64,");byte[] bytes = Base64.decode(base64Array[1]);//设置图片名称前使用唯一id,防止名字重复name = IdUtil.fastSimpleUUID()+"_"+name;//在保存汉字时使用拼音,汉字可能不兼容,例如iosname = PinyinUtil.getPinyin(name, "");FileUtil.writeBytes(bytes,uploadPath+name);return uploadDomain+"/images/"+name;}
}

效果:

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

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

相关文章

D. The Omnipotent Monster Killer

D. The Omnipotent Monster Killer 不每到一轮再考虑杀哪些&#xff0c;而是对怪物考虑&#xff0c;考虑怪物什么时候死&#xff0c;死前造成了多少伤害不以轮数为考虑主体&#xff0c;而是以怪物为考虑主体若当前根的怪物在wi轮死亡&#xff0c;wi没在之前出现过则该根需要连…

系统测试-白盒测试学习

目录 1、语句覆盖法&#xff1a; 2、判定覆盖法&#xff1a; 3、条件覆盖法&#xff1a; 4、判定条件覆盖&#xff1a; 5、条件组合的覆盖&#xff1a; 6、路径覆盖&#xff1a; 黑盒&#xff1a;需求 白盒&#xff1a;主要用于单元测试 1、语句覆盖法&#xff1a; 程序…

OSU!题解(概率dp)

题目&#xff1a;OSU! - 洛谷 思路&#xff1a; 设E()表示截止到i所获得的分数&#xff1b; 对于到i点的每一个l&#xff0c;如果第i1点为1&#xff0c;那么会新增分数3*l^23*l1; 就有递推公式方程&#xff1a; E()E()p[i1]p*(3*l^23*l1);(p代表截止到i获得长度l的概率)&a…

怎样在 PostgreSQL 中优化对多表关联的连接条件选择?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 怎样在 PostgreSQL 中优化对多表关联的连接条件选择一、理解多表关联的基本概念二、选择合适的连接条件…

[Qt] QObject禁止拷贝构造和赋值运算符的原因

QObject为什么禁用复制构造函数和赋值运算符&#xff1f; 但是注意第一点&#xff0c;不要以为 QObject 的 objectName 必须是唯一的。 相关思考 基类禁止拷贝操作对派生类的影响 有瑕疵&#xff0c;最后一句应该是 赋值运算符

【C++】拷贝构造函数及析构函数

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

dbeaver连接mysql8异常

部署了mysql8&#xff0c;尝试用dbeaver 24.1.2连接它。结果配置完成后测试连接时报错&#xff1a;Public Key Retrieval is not allowed. 按照提示修改驱动属性&#xff1a; allowPublicKeyRetrievaltrue

【BUG】已解决:ValueError: Expected 2D array, got 1D array instead

已解决&#xff1a;ValueError: Expected 2D array, got 1D array instead 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉…

【Python爬虫教程】第6篇-使用session发起请求

为什么要使用session 前面介绍了如何使用reqesuts发起请求&#xff0c;今天介绍如何使用session发起请求。session简单理解就是一种会话机制&#xff0c;在浏览器中我们登录完之后&#xff0c;后面再请求服务数据都不需要再登录了&#xff0c;以为Cookie里已经保存了你的会话状…

Python | Leetcode Python题解之第238题除自身以外数组的乘积

题目&#xff1a; 题解&#xff1a; class Solution:def productExceptSelf(self, nums: List[int]) -> List[int]:length len(nums)# L 和 R 分别表示左右两侧的乘积列表L, R, answer [0]*length, [0]*length, [0]*length# L[i] 为索引 i 左侧所有元素的乘积# 对于索引为…

C# —— 泛型

泛型: 广泛的类型 一般用于传递类型的 泛型的命名规范&#xff1a;以T开头的单词命名&#xff0c; <> 中间类型就是传入泛型 <int> 整形的泛型 <T> 泛型类型 List<string> list new List<string>(); Dictionary<int, int> dic new Dict…

人工智能 (AI) 应用:一个异常肺呼吸声辅助诊断系统

关键词&#xff1a;深度学习、肺癌、多标签、轻量级模型设计、异常肺音、音频分类 近年来&#xff0c;流感对人类的危害不断增加&#xff0c;COVID-19疾病的迅速传播加剧了这一问题&#xff0c;导致大多数患者因呼吸系统异常而死亡。在这次流行病爆发之前&#xff0c;呼吸系统…

SCI一区级 | Matlab实现GJO-CNN-LSTM-Multihead-Attention多变量时间序列预测

SCI一区级 | Matlab实现GJO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测 目录 SCI一区级 | Matlab实现GJO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GJO-CNN-LSTM-Mutilhead-Attention金豺优化算…

Android 自定义Drawable实现跑马灯效果

这个跑马灯效果比自定义VIew实现丝滑&#xff0c;丝滑效果主要还是对颜色的取值比较关键 public class FluidColorfulFrameDrawable extends Drawable {private Paint paint;private RectF bounds;private RectF rectF new RectF();private float defaultRadius SizeUtils.d…

redhat基础的环境搭建

1:利用RUFUS进行U盘启动制作&#xff08;Rufus - 轻松创建 USB 启动盘&#xff09; 2&#xff1a;下载nvidia驱动后安装出现&#xff08;redhat安装驱动会有几个坑&#xff0c;可以参考这个CentOS 7.6安装 NVIDIA 独立显卡驱动&#xff08;完整版&#xff09;_centos 7.6 64位…

MongoDB自学笔记(三)

一、前文回顾 上一篇文章中我们学习了更新操作&#xff0c;以及讲解了部分的更新操作符&#xff0c;今天我们继续学习剩余的更新操作符。 二、更新操作符 1、$rename 语法&#xff1a;{ $rename: { < field1 >: < newName1 >, < field2 >: < newName2…

第15章 呈现数据《Linux命令行与Shell脚本编程大全笔记》

bash shell 文件描述符&#xff0c;使用文件描述符>或者>>或者< 文件描述符缩写描述0STDIN标准输入1STDOUT标准输出2STDERR标准错误&无标准输出和标准错误 临时重定向到文件描述符>&2&#xff0c;需要在索引值之前加一个&exec:永久重定向&#xf…

力扣刷题之978.最长湍流子数组

题干要求&#xff1a; 给定一个整数数组 arr &#xff0c;返回 arr 的 最大湍流子数组的长度 。 如果比较符号在子数组中的每个相邻元素对之间翻转&#xff0c;则该子数组是 湍流子数组 。 更正式地来说&#xff0c;当 arr 的子数组 A[i], A[i1], ..., A[j] 满足仅满足下列条…

FPGA笔试

半加器和全加器的区别&#xff1a; 1、半加器不考虑输入的进位&#xff0c;称之为半加。 2、全加器反之&#xff0c;考虑进位。 SRAM/DRAM优缺点对比_sram和dram的主要区别及优缺点-CSDN博客 消除竞争冒险的方法 ①滤波电容&#xff1a;因为尖峰脉冲很窄&#xff0c;用很小的…

LM(Levenberg-Marquardt) PCG(预条件共轭梯度法)

文章目录 PCG共轭梯度法PCG算法步骤示例程序实现运行结果PCG vs LMPCG优势PCG劣势LM优势LM劣势综合比较对比示例代码结果与对比总结 PCG共轭梯度法 预条件共轭梯度法&#xff08;PCG&#xff09;是一种用于求解大规模稀疏线性系统 A x b Ax b Axb的迭代方法。它在求解对称正…