前端反显后端图片、上传预览图片

server/2024/9/24 12:58:52/

 一、下载反显图片

1、将文件下载为blob格式文件。

2、将后端返回的文件转为base64,然后将解析完的数据赋值到图片组件上。 

将后端返回的数据解拿出,调用转换base64 方法:

          downloadFile(_this.userInfo.imgUrl).then(res => {res = res.database64(res).then(res => {_this.imaUrlData = res})}).catch(err => {message({message: err,type: "error",});})

解析为base64编码 

export const base64 = (stream) => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = function (e) {resolve(e.target.result);};reader.onerror = reject;reader.readAsDataURL(stream);});
}

imaUrlData赋值到图片组件上:

        <el-col :span="3"><el-avatarclass="head_portrait"shape="circle"@error='true':size="110":src="imaUrlData"></el-avatar>

 二、编辑时预览:

1、判断文件类型、然后将文件解析为Base64、上传成功后替换显示数据(使用两个formDate对象哦,一个用于显示,一个用于表单修改)。

    onFileChange(e) {let file = e.target.files[0];if (null == file) {message({message: '选择在的文件为空!',type: "error",})this.$refs.fileFile.value = null} else {let arr = ['jpeg', 'png', 'jpg']if (!arr.includes(file.type.split('/')[1])) {message({message: '上传文件格式不正确!',type: "error",})this.$refs.fileFile.value = null} else {let reader = new FileReader();reader.onload = (event) => {this.fromData.imaUrlData = event.target.result;let formData = new FormData()formData.append('file', file)this.uploadImage(formData);};reader.readAsDataURL(file);}}}

    uploadImage(base64Image) {// 发送Base64图像到后端uploadFile(base64Image).then(res => {this.fromData.imgUrl = res.data.msg// console.log('上传文件1',res)}).catch(err => {message({message: '上传失败',type: "error",});console.log('上传文件出错', err)})}


http://www.ppmy.cn/server/62212.html

相关文章

在linux中查找 / 目录下的以.jar结尾的文件(find / -name *.jar)

文章目录 1、查找 / 目录下的以.jar结尾的文件 1、查找 / 目录下的以.jar结尾的文件 [rootiZuf6332h890vozldoxcprZ ~]# find / -name *.jar /etc/java/java-1.8.0-openjdk/java-1.8.0-openjdk-1.8.0.342.b07-1.el9_0.x86_64/lib/security/policy/limited/US_export_policy.ja…

人像视频预处理【时间裁剪+画面裁切+调整帧率】

在视频处理中&#xff0c;cut&#xff08;裁剪&#xff09;、crop&#xff08;画面裁切&#xff09;和fps&#xff08;帧率调整&#xff09;这三个操作的顺序安排对最终的视频质量和效率有重要影响。以下是一种推荐的顺序和理由&#xff0c;旨在提高效率和减少错误&#xff1a;…

【深度学习】PyTorch框架(1):PyTorch基础

1.引言 PyTorch专辑的知识源于2023年阿姆斯特丹大学深度学习课程的PyTorch入门教程&#xff0c;旨在为程序员提供PyTorch基础的简洁介绍&#xff0c;并帮助您配置环境&#xff0c;以便编写自己的神经网络。PyTorch是一个开源的机器学习框架&#xff0c;它允许您自定义神经网络…

PostgreSQL 基于时间点恢复

作者&#xff1a;文若 前言 本篇文章介绍 PostgreSQL 基于时间点恢复&#xff08;point-in-time-recover&#xff09;需要的条件及恢复过程&#xff0c;属于操作说明。 1. WAL 日志 WAL&#xff08;Write Ahead Log&#xff09; 日志优先写机制&#xff0c;常用于关系型数据…

关于windows下编译xLua插件的流程记录

1.工程准备 1.xLua工程&#xff1a;GitHub - Tencent/xLua: xLua is a lua programming solution for C# ( Unity, .Net, Mono) , it supports android, ios, windows, linux, osx, etc. 2.build_xlua_with_libs工程&#xff1a;GitHub - chexiongsheng/build_xlua_with_libs…

搭建邮局服务器的配置步骤?如何管理协议?

搭建邮局服务器需要考虑的安全措施&#xff1f;怎么搭建服务器&#xff1f; 在现代互联网环境中&#xff0c;电子邮件是重要的沟通工具。为了保证信息传递的稳定性和安全性&#xff0c;许多企业选择自行搭建邮局服务器。AokSend将详细介绍搭建邮局服务器的配置步骤&#xff0c…

匿名函数与函数

百度上是这样定义匿名函数的&#xff1a; 匿名函数它是matlab中定义的一种函数形式&#xff0c;出现在matlab中&#xff0c;匿名函数不以文件形式驻留在文件夹上&#xff1b;他的生成方式最简捷&#xff0c;可在指令窗或任何函数体内通过指令直接生成。 匿名函数的作用主要是…

达梦数据库dm8安装步骤及迁移

目录 前言: 一、安装部署 1、下载 2、创建用户及安装目录 3、挂载下载的镜像 4、环境配置 5、安装 二、基本使用 1、DM工具使用 2、兼容性配置 2.1 兼容GBK字符集编码 2.2 兼容UTF-8字符集编码 3、创建用户和密码,表空间 4、整理数据库配置 5、启动脚本设置 …