使用OkHttp3获取图片后通过HttpServletResponse返回给前端，JS无法解析图片的问题

嘿，我来帮你排查下这个问题～你现在遇到的核心问题是把图片的原始二进制字节直接转成字符串塞进JSON里返回，这肯定会出问题的——二进制数据里有很多不可打印的控制字符，直接转字符串会导致编码混乱、数据丢失，前端自然没法还原成正常的图片。

下面给你两种可行的解决方案，你可以根据业务需求选择：

方案一：直接返回图片字节流（推荐，更高效） #

如果不需要把图片包装在JSON里，直接返回图片本身是最优解，前端可以直接把接口地址当作图片源来用，处理起来非常简单。

后端代码示例： #

// 用OkHttp获取图片响应
Request getResponse = new Request.Builder()
     .URL("/getImage")
     .method("GET", null)
     .addHeader("Authorization", "oauthtoken " + accessToken).build();

Response response = client.newCall(getResponse).execute();
ResponseBody okHttpResponseBody = response.body();

// 处理HttpServletResponse
if (okHttpResponseBody != null) {
    // 设置正确的响应头：Content-Type用OkHttp返回的类型，确保和图片格式匹配
    response.setContentType(okHttpResponseBody.contentType().toString());
    // 设置内容长度（可选，但能帮助前端更好地处理）
    response.setContentLength((int) okHttpResponseBody.contentLength());

    // 把OkHttp的输入流写到response的输出流里
    InputStream inputStream = okHttpResponseBody.byteStream();
    OutputStream outputStream = response.getOutputStream();

    byte[] buffer = new byte[4096];
    int bytesRead;
    while ((bytesRead = inputStream.read(buffer)) != -1) {
        outputStream.write(buffer, 0, bytesRead);
    }

    // 关闭流，释放资源
    outputStream.flush();
    inputStream.close();
    outputStream.close();
    okHttpResponseBody.close();
}

前端JS处理： #

直接把接口地址赋值给img的src就行，不需要额外解析：

const img = document.createElement('img');
img.src = '/your-backend-endpoint'; // 你的后端接口地址
document.body.appendChild(img);

方案二：包装成JSON返回（需Base64编码） #

如果业务上必须把图片放在JSON里返回，那得先把二进制字节转成Base64编码的字符串——Base64会把二进制数据转成可打印的ASCII字符，这样就能安全地放在JSON里传输了。

后端代码示例： #

// 用OkHttp获取图片字节
Request getResponse = new Request.Builder()
     .URL("/getImage")
     .method("GET", null)
     .addHeader("Authorization", "oauthtoken " + accessToken).build();

Response response = client.newCall(getResponse).execute();
ResponseBody okHttpResponseBody = response.body();

if (okHttpResponseBody != null) {
    byte[] imageBytes = okHttpResponseBody.bytes();
    // 把字节转成Base64字符串
    String base64Image = Base64.getEncoder().encodeToString(imageBytes);
    
    // 构造JSON对象
    JSONObject jsonObject = new JSONObject();
    jsonObject.put("file", base64Image);
    
    // 设置响应为JSON类型
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    
    // 写出JSON
    PrintWriter out = response.getWriter();
    out.print(jsonObject.toString());
    out.flush();
    out.close();
    
    okHttpResponseBody.close();
}

前端JS处理： #

拿到Base64字符串后，需要加上对应图片格式的前缀，转成Data URL或者Blob来显示：

fetch('/your-backend-endpoint')
  .then(res => res.json())
  .then(data => {
    // 注意要根据实际图片格式加前缀，比如JPG是data:image/jpeg;base64,，PNG是data:image/png;base64,
    const imageUrl = 'data:image/jpeg;base64,' + data.file;
    // 创建img元素显示图片
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
    
    // 如果需要转成Blob（比如上传或者其他操作），可以这么做：
    // const byteCharacters = atob(data.file);
    // const byteNumbers = new Array(byteCharacters.length);
    // for (let i = 0; i < byteCharacters.length; i++) {
    //   byteNumbers[i] = byteCharacters.charCodeAt(i);
    // }
    // const byteArray = new Uint8Array(byteNumbers);
    // const blob = new Blob([byteArray], {type: 'image/jpeg'});
  });

总结 #

优先选方案一，因为直接返回字节流没有Base64编码的额外开销（Base64会让数据体积增大30%左右），前端处理也更简单。只有当业务必须用JSON包装时，再考虑方案二。

备注：内容来源于stack exchange，提问作者Eddie