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"}})
}