开始没事学着写博客了
要从服务端获取一堆字节数据流,假设为一张图片字节资源很多:为get请求且无自定义header等,直接在图片 img src attribute携带uri+query即可。
实际中,其实这种情况不多,考虑到安全性,给前端提供的接口就需要进行权限校验,不能无缘无故让所有人都能访问,这个没有毛病吧。例如:服务端编写的http协议,数据报文格式为post body,并且要携带token等。使用src就处理不鸟这个咯。这个时候就需要用到JavaScript提供的字节流操作api。
先介绍一下几位成员:
- 最基础的不可变二进制字节流:blob。
- 针对文件字节流blob不可变升级版本:fileReader。
- 可变二进制字节流的牛逼选手: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进行读取即可。如果返回字节数过大,针对业务类型,看看互联网上有哪种协议可以把数据拆分,并且重新组装的,例如流媒体这种,没有的话就合伙商量自定义协议报文来处理。