前端如何渲染图片流到页面

需求

后端要返回一个图片流，这个流在浏览器访问是可以预览的状态，然后前端拿到流之后需要将这个图片展示出来。前端必须要使用ajax的POST请求，因为传递的参数比较多，而且还需要token权限校验逻辑，所以必须要POST请求，不能用GET请求。这个需求其实上也很常见，下面开看下如何实现的。

重点

后端没什么可说的，就是返回图片流即可。重点是前端如何将流给渲染出来。需要用到Blob这个对象。

如何实现

后端实现

package com.example.bootdemo;

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;
@CrossOrigin(origins = "*")
@RestController
public class ImageController {

    @RequestMapping(value = "/xx", method = RequestMethod.GET)
    public void getImageAsByteArray(HttpServletResponse response) throws IOException {
        //获取下载文件的输入流
        InputStream in = new FileInputStream("C:\Users\Think\Desktop\1.png");
        response.setContentType(MediaType.IMAGE_JPEG_VALUE);
        //加上就是下载 否则就是预览
        String returnName = URLEncoder.encode("图片名字", "UTF-8");
        response.addHeader("Content-Disposition","attachment;filename="+new String(returnName.getBytes("ISO8859-1")));
        //创建缓冲区
        int len = 0;
        byte[] buffer = new byte[1024];
        //获取OutputStream对象
        ServletOutputStream out = response.getOutputStream();
        //将FileInputStream流写入到buffer缓冲区中，使用OutputStream流将缓冲区的数据输出到客户端
        while ((len = in.read(buffer)) > 0){
            out.write(buffer,0,len);
        }
        in.close();
        out.close();
    }
}

前端实现

这里面我使用的是axios对象实现的ajax请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios请求示例</title>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 这个函数在页面加载后执行
        window.onload = function() {
            // 使用axios发出GET请求
            axios.get('http://127.0.0.1:8080/xx',{ responseType: 'blob' })
                .then(function (response) {
                    // 请求成功时的处理
                    console.log(response.data); // 在控制台输出响应数据
                     // codeFile 接口返回结果
                    const blob = new Blob([response.data])
                    const url = window.URL.createObjectURL(blob)
                    var img=document.getElementById("xx");
                    img.setAttribute("src",url);
                  })
                .catch(function (error) {
                    // 请求失败时的处理
                    console.error('请求失败：', error);
                });
        }
    </script>
</head>
<body>
    <h1>API数据</h1>
    <div id="api-response">
        API请求图片结果将显示在这里
        <img id="xx" src="" alt="">
    </div>
</body>
</html>