開始沒事學(xué)著寫博客了

要從服務(wù)端獲取一堆字節(jié)數(shù)據(jù)流，假設(shè)為一張圖片字節(jié)資源很多：為get請求且無自定義header等，直接在圖片 img? src attribute攜帶uri+query即可。

實(shí)際中，其實(shí)這種情況不多，考慮到安全性，給前端提供的接口就需要進(jìn)行權(quán)限校驗(yàn)，不能無緣無故讓所有人都能訪問，這個沒有毛病吧。例如：服務(wù)端編寫的http協(xié)議，數(shù)據(jù)報(bào)文格式為post body，并且要攜帶token等。使用src就處理不鳥這個咯。這個時候就需要用到JavaScript提供的字節(jié)流操作api。

先介紹一下幾位成員：

最基礎(chǔ)的不可變二進(jìn)制字節(jié)流：blob。

針對文件字節(jié)流blob不可變升級版本：fileReader。

可變二進(jìn)制字節(jié)流的牛逼選手：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請求，知道是二進(jìn)制字節(jié)流了，就設(shè)定服務(wù)端響應(yīng)數(shù)據(jù)類型為牛逼選手arraybuffer，防止以后需要使用JS操作這些字節(jié)流之類的，設(shè)置為blob也沒有問題，反正就是一個圖片。這里其實(shí)不用操作這個arraybuffer，直接轉(zhuǎn)化為blob進(jìn)行瀏覽器生成temp臨時鏈接，提供給src顯示。

服務(wù)端代碼：

@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項(xiàng)目，只用到了jdk提供的文件讀取，bio流式響應(yīng)文件，web容器字節(jié)流傳輸。

總結(jié)：針對前端-發(fā)送請求。上傳文件舉例：如果文件過大 （2G往上的那種），可以考慮把上傳的文件轉(zhuǎn)化為filereader 用blob進(jìn)行slice拆分，分批次調(diào)用接口上傳。如果服務(wù)端返回的是文件之類的二進(jìn)制流，響應(yīng)類型用arraybuffer接收，要寫入：直接操作arraybuffer。不寫入：直接把a(bǔ)rraybuffer轉(zhuǎn)化為blob進(jìn)行讀取即可。如果返回字節(jié)數(shù)過大，針對業(yè)務(wù)類型，看看互聯(lián)網(wǎng)上有哪種協(xié)議可以把數(shù)據(jù)拆分，并且重新組裝的，例如流媒體這種，沒有的話就合伙商量自定義協(xié)議報(bào)文來處理。

總結(jié)

以上是生活随笔為你收集整理的前端读取字节流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。