前端读取字节流

开始没事学着写博客了

要从服务端获取一堆字节数据流，假设为一张图片字节资源很多：为get请求且无自定义header等，直接在图片 img  src attribute携带uri+query即可。

实际中，其实这种情况不多，考虑到安全性，给前端提供的接口就需要进行权限校验，不能无缘无故让所有人都能访问，这个没有毛病吧。例如：服务端编写的http协议，数据报文格式为post body，并且要携带token等。使用src就处理不鸟这个咯。这个时候就需要用到JavaScript提供的字节流操作api。

先介绍一下几位成员：

1. 最基础的不可变二进制字节流：blob。
2. 针对文件字节流blob不可变升级版本：fileReader。
3. 可变二进制字节流的牛逼选手：arraybuffer。

前端代码：

<img :src="src" alt="" style="width:400px;height:200px; ">
image() {
      axios({
        method: 'post',
        url: 'http://127.0.0.1:8080/file/download',
        data: {},
        responseType: 'arraybuffer'
      }).then(res => {
        let blob = new Blob([res.data]);
        const url = window.URL.createObjectURL(blob);
        this.src = url;
      });
    }

基本axios请求，知道是二进制字节流了，就设定服务端响应数据类型为牛逼选手arraybuffer，防止以后需要使用JS操作这些字节流之类的，设置为blob也没有问题，反正就是一个图片。这里其实不用操作这个arraybuffer，直接转化为blob进行浏览器生成temp临时链接，提供给src显示。

服务端代码：

@RestController
@RequestMapping(value = "file")
@CrossOrigin
public class FileDownController {

    @RequestMapping(value = "download", method = RequestMethod.POST)
    public void upload(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws IOException {
        File file = new File("/data/home/lilele/Pictures/Wallpapers/wolfgang-hasselmann-WrVvYxq11Yk-unsplash.jpg");
        FileInputStream fileInputStream = new FileInputStream(file);
        byte[] bytes = new byte[(int) file.length()];
        fileInputStream.read(bytes);
        fileInputStream.close();
        httpServletResponse.setContentType("application/octet-stream;image/jpg");
        httpServletResponse.setHeader("Content-Disposition", "image;imageName=test-pic");
        httpServletResponse.addHeader("Cache-Control", "no-cache");
        OutputStream outputStream = httpServletResponse.getOutputStream();
        outputStream.write(bytes);
        outputStream.flush();
        outputStream.close();
    }
}

基本的springboot项目，只用到了jdk提供的文件读取，bio流式响应文件，web容器字节流传输。

总结：针对前端-发送请求。上传文件举例：如果文件过大 （2G往上的那种），可以考虑把上传的文件转化为filereader 用blob进行slice拆分，分批次调用接口上传。如果服务端返回的是文件之类的二进制流，响应类型用arraybuffer接收，要写入：直接操作arraybuffer。不写入：直接把arraybuffer转化为blob进行读取即可。如果返回字节数过大，针对业务类型，看看互联网上有哪种协议可以把数据拆分，并且重新组装的，例如流媒体这种，没有的话就合伙商量自定义协议报文来处理。