Base64码转换


title: Base64码转换
date: 2024-06-01 20:30:28
tags: vue3

后端图片前端显示乱码

现象

后端传来一个图片,前端能够接收,但是console.log()后发现图片变成了乱码,但是检查后台又发现能够正常的收到了这张图片。

处理方法

笔者有尝试将图片乱码转成二进制然后再转换成普通的url,但是以失败告终了。

后来使用将乱码转换成base64形式的url,解决了这个问题。

具体代码

vue3组件中的js:

 getApi(typeObj.value.media_id).then((response) => {//将图片乱码转换成base64pictureUrl.value = `data:image/png;base64,${btoa(new Uint8Array(response).reduce((data, byte) => data + String.fromCharCode(byte),""))}`;typeObj.value.httpUrl = pictureUrl.value;});

接口js文件处理:(添加responseType: ‘arraybuffer’)

export function getOnePicture(mediaId){return request({url:''method:'get',responseType: 'arraybuffer' ,headers:{"Content-Type":"multipart/form-data"}})
}

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

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

相关文章

Java关键字详解

文章目录 什么是关键字?数据类型(10个)byte、char、boolean、short、int、float、long、double、void、enum 流程控制(12个)if、else、do、while、for 、switch、case、assertbreak(跳出循环)co…

Orchestrator 记录

Orchestrator 安装 Orchestrator cd /usr/local/orchestrator nohup ./orchestrator --configorchestrator.conf.json http >> orchestrator.log 2>&1 & tailf orchestrator.log访问 http://10.XX.36.216:30000实例管理命令 discover forget begin-maintena…

STM32(八):独立看门狗 (标准库函数)

前言 上一篇文章介绍了STM32单片机中的USART串口通信,这篇文章我们来介绍一下如何用STM32单片机中的独立看门狗来实现检测按键点灯的程序。 一、实验原理 单片机系统会由于受到外界的干扰,而造成程序执行紊乱,系统无法正常运行。为了防止这…

STL:stack和queue

文章目录 stack的介绍和使用stack的介绍stack的使用stack的模拟实现 queue的介绍和使用queue的介绍queue的使用queue的模拟实现 priority_queue的介绍和使用priority_queue的介绍priority_queue的使用优先级队列的模拟实现 deque的介绍deque的结构deque的缺陷为什么选择deque作…

Django ORM魔法:用Python代码召唤数据库之灵!

探索Django ORM的神奇世界,学习如何用Python代码代替复杂的SQL语句,召唤数据库之灵,让数据管理变得轻松又有趣。从基础概念到高级技巧,阿佑带你一步步成为Django ORM的魔法师,让你的应用开发速度飞起来! 文…

golang线程池ants-四种使用方法

目录 1、ants介绍 2、使用方式汇总 3、各种使用方式详解 3.1 默认池 3.2 普通模式 3.3 带参函数 3.4 多池多协程 4、总结 1、ants介绍 众所周知,goroutine相比于线程来说,更加轻量、资源占用更少、无线程上下文切换等优势,但是也不能…

前端Vue小兔鲜儿电商项目实战Day06

一、本地购物车 - 列表购物车 1. 基础内容渲染 ①准备模板 - src/views/cartList/index.vue <script setup> const cartList [] </script><template><div class"xtx-cart-page"><div class"container m-top-20"><div…

React@16.x(15)PureComponent 和 memo

目录 1&#xff0c;什么是 PureComponent2&#xff0c;什么是 memo3&#xff0c;举例3.2&#xff0c;优化13.1&#xff0c;优化2-函数位置 4&#xff0c;注意点4.1&#xff0c;为了提升效率&#xff0c;应该尽量使用 PureComponent4.2&#xff0c;不要直接改变之前的状态&#…

vs2019 无法打开QT的UI文件

/* * --------------------------- Microsoft Visual StudioQt5.15.2\5.15.2\msvc2019_64 --------------------------- D:\QT_Project_vs\QtWidgetsApplication1\QtWidgetsApplication1\QtWidgetsApplication1.ui 无法打开文件。 --------------------------- 确定 -------…

解析Java中1000个常用类:Override类,你学会了吗?

在 Java 编程中,继承和多态是两个重要的概念。为了确保我们正确地覆盖父类的方法,Java 提供了 @Override 注解。虽然 @Override 看起来很简单,但在实际开发中,它能为我们提供很多便利并避免一些常见的错误。本文将详细介绍 @Override 注解的用途、用法及其在实际开发中的重…

基于LQR控制算法的电磁减振控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于LQR控制算法的电磁减振控制系统simulink建模与仿真。仿真输出控制器的收敛曲线。 2.系统仿真结果 3.核心程序与模型 版本&#xff1a;MATLAB2022a 08_029m 4.系统原理…

PySide6 GUI 学习笔记——常用类及控件使用方法(常用类坐标点QPoint)

控件是PySide设计好的能承载用户输入、输出的小窗体&#xff0c;将多个控件有机整合&#xff0c;能形成用户所需要的界面。而每一个控件&#xff0c;都有属于自己的属性、方法、信号、槽函数和事件&#xff08;event&#xff09;&#xff0c;且控件与控件之间又有继承关系。 G…

系统架构设计师【第5章】: 软件工程基础知识 (核心总结)

文章目录 5.1 软件工程5.1.1 软件工程定义5.1.2 软件过程模型5.1.3 敏捷模型5.1.4 统一过程模型&#xff08;RUP&#xff09;5.1.5 软件能力成熟度模型 5.2 需求工程5.2.1 需求获取5.2.2 需求变更5.2.3 需求追踪 5.3 系统分析与设计5.3.1 结构化方法5.3.2 面向对象…

Qt6 mathgl数学函数绘图

1. 程序环境 Qt6.5.1, mingw11.2mathgl 8.0.1: https://sourceforge.net/projects/mathgl/,推荐下载mathgl-8.0.LGPL-mingw.win64.7z,Windows环境尝试自己编译mathgl会缺失一些库,补充完整也可以自己编译,路径"D:\mathgl-8.0.LGPL-mingw.win64\bin"添加至系统环境…

复试不考机试,初试300分以上,上岸稳了?东北林业大学计算机考研考情分析!

东北林业大学&#xff08;Northeast Forestry University&#xff09;&#xff0c;简称东北林大&#xff08;NEFU&#xff09;&#xff0c;位于黑龙江省哈尔滨市&#xff0c;是一所以林科为优势、林业工程为特色的中华人民共和国教育部直属高校&#xff0c;由教育部、国家林业局…

Java多线程--volatile关键字

并发编程的三大特性 可见性有序性原子性 可见性 为什么会有可见性问题&#xff1f; 多核CPU 为了提升CPU效率&#xff0c;设计了L1&#xff0c;L2&#xff0c;L3三级缓存&#xff0c;如图。 如果俩个核几乎同时操作同一块内存&#xff0c;cpu1修改完&#xff0c;当下是对c…

Spring Cloud 应用框架

Spring Cloud 是基于 Spring Boot 的一套工具集&#xff0c;用于构建分布式系统中的常见模式。它提供了服务发现、配置管理、智能路由、服务熔断、负载均衡、全链路追踪等一系列功能&#xff0c;帮助开发者快速构建和部署分布式微服务架构。本文将详细介绍 Spring Cloud 的核心…

APISIX的安装与测试(springboot服务测试)

安装&#xff1a; 1.1安装依赖&#xff1a; curl https://raw.githubusercontent.com/apache/apisix/master/utils/install-dependencies.sh -sL | bash -1.2 安装 OpenResty yum-config-manager --add-repo https://openresty.org/package/centos/openresty.reposudo yum i…

英语翻译程序,可以对用户自己建立的词汇表进行增删查改

⑴ 自行建立一个包含若干英文单词的词汇表文件&#xff0c;系统初始化时导入内存&#xff0c;用于进行句子翻译。 ⑵ 用户可以输入单词或者句子&#xff0c;在屏幕上显示对应翻译结果。 ⑶ 用户可对词汇表进行添加和删除&#xff0c;并能将更新的词汇表存储到文件中。 #defi…

Adobe Acrobat DC无法卸载

控制版面、电脑管家等均无法卸载&#xff0c;使用自身的remove也不能卸载 解决方法&#xff1a;删除Adobe Acrobat DC的注册表 1、首先打开注册列表&#xff1a; 2、根据圈出来的信息&#xff0c;找到以下路径&#xff1a; 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Inst…