開始沒事學著寫博客了

要從服務端獲取一堆字節數據流，假設為一張圖片字節資源很多：為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進行讀取即可。如果返回字節數過大，針對業務類型，看看互聯網上有哪種協議可以把數據拆分，并且重新組裝的，例如流媒體這種，沒有的話就合伙商量自定義協議報文來處理。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。