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.rhkb.cn/news/342223.html

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

相关文章

联想Y410P跑大模型

安装vs 2017 查看GPU版本 查看支持哪个版本的cuda windows cuda更新教程_cuda 12.0-CSDN博客 下载并安装cuda tookit 10.1 CUDA Toolkit 10.1 Update 2 Archive | NVIDIA Developer 找到下载的文件,安装 参考安装链接 Win10 Vs2017 CUDA10.1安装(避坑…

【C语言】10.C语言指针(4)

文章目录 1.回调函数是什么?2.qsort 使⽤举例2.1 使⽤qsort函数排序整型数据2.2 使⽤qsort排序结构数据 3.qsort函数的模拟实现 1.回调函数是什么? 回调函数就是一个通过函数指针调用的函数。 如果你把函数的指针(地址)作为参数…

kafka-消费者-指定offset消费(SpringBoot整合Kafka)

文章目录 1、指定offset消费1.1、创建消费者监听器‘1.2、application.yml配置1.3、使用 Java代码 创建 主题 my_topic1 并建立3个分区并给每个分区建立3个副本1.4、创建生产者发送消息1.4.1、分区0中的数据 1.5、创建SpringBoot启动类1.6、屏蔽 kafka debug 日志 logback.xml1…

服务器数据恢复—EqualLogic存储硬盘灯亮黄色的数据恢复案例

服务器数据恢复环境: 一台某品牌EqualLogic PS 6011型号存储,底层有一组由16块SAS硬盘组建的RAID5阵列,上层存储空间划分了4个卷,格式化为VMFS文件系统,存放虚拟机文件。 服务器故障: 存储设备上两块硬盘指…

基于STC89C52单片机空气PM2.5系统设计资料

#include <reg52.h>#include <intrins.h>#define uint unsigned int#define uchar unsigned char //宏定义sbit RSP1^6;//液晶接口sbit ENP1^7;sbit LED P2^0;//粉尘传感器控制接口sbit ADCS P3^7;//AD0832接口sbit ADCLK P3^5;sbit ADDI P3^6;sbit ADDO P3^6;…

【大模型】基于Hugging Face调用及微调大模型(1)

文章目录 一、前言二、Transformer三、Hugging Face3.1 Hugging Face Dataset3. 2 Hugging Face Tokenizer3.3 Hugging Face Transformer3.4 Hugging Face Accelerate 四、基于Hugging Face调用模型4.1 调用示例4.2 调用流程概述4.2.1 Tokenizer4.2.2 模型的加载4.2.3 模型基本…

# RocketMQ 实战:模拟电商网站场景综合案例(二)

RocketMQ 实战&#xff1a;模拟电商网站场景综合案例&#xff08;二&#xff09; 一、SpringBoot 整合 Dubbo &#xff1a;dubbo 概述 1、dubbo 概述 Dubbo &#xff1a;是阿里巴巴公司开源的一款高性能、轻量级的 Java RPC 框架&#xff0c;它提供了三大核心能力&#xff1a…

【WP】猿人学15_备周则意怠_常见则不疑

https://match.yuanrenxue.cn/match/15 抓包分析 抓包分析有一个m参数&#xff0c;三个数字组成 追栈/扣代码 根据启动器顺序追栈&#xff0c;一般优先跳过 jQuery 直接能找到加密函数 每次获取的数字都不一样 window.m function() { t1 parseInt(Date.parse(new Date(…

【全开源】Java共享茶室棋牌室无人系统支持微信小程序+微信公众号

打造智能化休闲新体验 一、引言&#xff1a;智能化休闲时代的来临 随着科技的飞速发展&#xff0c;智能化、无人化服务逐渐渗透到我们生活的各个领域。在休闲娱乐行业&#xff0c;共享茶室棋牌室无人系统源码的出现&#xff0c;不仅革新了传统的休闲方式&#xff0c;更为消费…

Marin说PCB之如何在主板上补偿链路中的走线的等长误差?

一场雨把我困在这里&#xff0c;你冷漠地看我没有穿雨衣淋成落汤鸡。今天刚刚出门时候看天气预报没有雨&#xff0c;于是我就没有带雨衣骑电动车去公司了&#xff0c;谁知道回来的路上被淋成狗了。天气预报就像是女人的脾气那样&#xff0c;不能完全相信的。 好了&#xff0c;我…

什么是视频号招商团长?如何加入成为视频号招商团长

视频号招商团长&#xff0c;是通过微信视频号平台的线上和线下活动&#xff0c;撮合商家和达人进行合作&#xff0c;帮助商家、达人在视频号成长发展&#xff1b;同时还可以通过邀请内容创作者入驻微信视频号并为其提供支持&#xff1b;从而获取佣金收益的&#xff0c;而其作用…

【LeetCode算法】第100题:相同的树

目录 一、题目描述 二、初次解答 三、官方解法 四、总结 一、题目描述 二、初次解答 1. 思路&#xff1a;二叉树的先序遍历。采用递归的先序遍历方法&#xff0c;首先访问根节点若不同则返回false&#xff0c;其次访问左子树和右子树。在访问左右子树时&#xff0c;需要注意…

CAN总线学习笔记-CAN帧结构

数据帧 数据帧&#xff1a;发送设备主动发送数据&#xff08;广播式&#xff09; 标准格式的11ID不够用了&#xff0c;由此产生了扩展格式 SOF&#xff1a;帧起始&#xff0c;表示后面一段波形为传输的数据位 ID&#xff1a;标识符&#xff0c;区分功能&#xff0c;同时决定优…

【qt】项目移植

项目移植 一.前言二.同名问题三.具体操作1.修改文件名2.修改类名3.修改一些不能自动改的名4.修改.ui文件5.删除原来自动生成的ui_xxx.h文件6.修改头文件 四.导入项目五.使用导入的项目六.项目建议 一.前言 终于概率论考完了,有时间了,接着上个项目,我们继续来完成我们的多窗口开…

探索 LLM 预训练的挑战,GPU 集群架构实战

万卡 GPU 集群实战&#xff1a;探索 LLM 预训练的挑战 一、背景 在过往的文章中&#xff0c;我们详细阐述了LLM预训练的数据集、清洗流程、索引格式&#xff0c;以及微调、推理和RAG技术&#xff0c;并介绍了GPU及万卡集群的构建。然而&#xff0c;LLM预训练的具体细节尚待进一…

Qt——升级系列(Level Two):Hello Qt 程序实现、项目文件解析、Qt 编程注意事项

Hello Qt 程序实现 使用“按钮”实现 纯代码方式实现&#xff1a; // Widget构造函数的实现 Widget::Widget(QWidget *parent): QWidget(parent) // 使用父类构造函数初始化QWidget&#xff0c;传入父窗口指针, ui(new Ui::Widget) // 创建Ui::Widget类的实例&#xff0c;并…

YOLOv8_obb预测流程-原理解析[旋转目标检测理论篇]

YOLOv8_obb的预测流程,主要分预处理模块、推理模块和后处理模块。这里面有很多内容是和目标检测预测流程是重合的,主要区别在于Angle分支、NMS后处理以及regularize_rboxes部分。本文也主要介绍一下这三个模块,其他模块可以结合YOLOv8预测流程-原理解析[目标检测理论篇]一起…

Ffmpeg安装和简单使用

Ffmpeg安装 下载并解压 进入官网 (https://ffmpeg.org/download.html)&#xff0c;选择 Window 然后再打开的页面中下滑找到 release builds&#xff0c;点击 zip 文件下载 环境变量配置 下载好之后解压&#xff0c;找到 bin 文件夹&#xff0c;里面有3个 .exe 文件 然后复制…

Zookeeper复习

一、入门 1、概念 zookeeper文件系统通知机制 2.特点 1&#xff09;、一个领导者&#xff0c;多个跟随者组成的集群。 2&#xff09;、集群中只要有半数以上存活机制&#xff0c;zookeeper集群能正产服务。zk适合安装奇数台。 3&#xff09;、全局数据一致&#xff1a;每…

量化投资分析平台 迅投 QMT(四)获取标的期权的代码

量化投资分析平台 迅投 QMT [迅投 QMT](https://www.xuntou.net/?user_code7NYs7O)我目前在使用有了底层标的如何获取期权的交易代码呢&#xff1f;上代码历史帖子 迅投 QMT 我目前在使用 两个月前&#xff08;2024年4月&#xff09;迅投和CQF有一个互动的活动&#xff0c;进…