React项目中axios调用GET接口返回非URL数据如何转base64显示图片

• 第一步：修改axios请求配置，指定响应类型为blob
  你当前拿到的data显示为乱码的核心原因是axios默认将响应内容按UTF-8文本解析，要获取二进制图片资源需要在get请求中新增responseType: 'blob'配置，修改后的请求代码如下：

export const getFileImage = (payload) => async dispatch => {    
  try {        
    console.log("Payload--->",payload);
    // 新增responseType配置指定返回二进制流
    let response = await axios.get(
      `/api/movies/${payload.movieId}/document/${payload.genre.toLowerCase().toString()}`,
      { responseType: 'blob' }
    );
    console.log("Response----->",response);
    // 如需存储到redux可在此处dispatch相关action，也可直接返回blob给调用的组件
    return response.data;
  } catch (error) {        
    console.log("请求出错", error);    
  }
}

• 第二步：将返回的blob对象转为base64格式
  在调用该接口的React组件中，拿到blob资源后通过FileReader API转为base64字符串，存储到组件state中即可直接用于图片渲染：

import { useState, useEffect } from 'react';
import { getFileImage } from '你的action文件路径';

const ImageRender = (requestPayload) => {
  const [imgBase64, setImgBase64] = useState('');

  useEffect(() => {
    const fetchImage = async () => {
      const imageBlob = await getFileImage(requestPayload);
      if(!imageBlob) return;
      // 二进制流转base64
      const reader = new FileReader();
      reader.onloadend = () => {
        setImgBase64(reader.result);
      };
      reader.readAsDataURL(imageBlob);
    };
    fetchImage();
  }, [requestPayload]);

  // 直接使用base64渲染图片
  return (
    <div>
      {imgBase64 && <img src={imgBase64} alt="接口返回图片" />}
    </div>
  )
}

• 特殊情况适配：如果打印response.data确认返回内容本身就是base64字符串，可省略转blob的步骤，直接在img标签的src属性中拼接资源前缀即可：png格式用src={data:image/png;base64,${response.data}}，jpg格式替换为data:image/jpeg;base64,即可。

内容的提问来源于stack exchange，提问作者itiDi