前端向Java后端请求blob、arraybuffer类型的数据流-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端向Java后端请求blob、arraybuffer类型的数据流。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目需求描述：

前端需要获取后端音频文件，但遇到跨域问题，不能直接使用url获取，需求必须使用流将文件传到前端。因此，考虑Java后端读取音频文件，然后向前端发送数据流，前端按后端发送类型将数据接收，并合成其格式文件。

后端代码举例

 @ResponseBody
 @PostMapping("/getWavFile")
 public ResponseEntity<byte[]> getUserVoiceprint(String fileName){
	 if(fileName == null || fileName == ""){
	     return null;
	 }
	 try{
	     String vpPath = "E:/files/wav/" + fileName + ".wav";
	     File f = new File(vpPath);
	     if(f.exists()){
	         byte[] file = Files.readAllBytes(f.toPath());
	         HttpHeaders headers = new HttpHeaders();
	         headers.set("Content-Disposition", "attachment; filename=\"" + f.getName() +".wav\"");
	         ResponseEntity<byte[]> response = new ResponseEntity(file, headers, HttpStatus.OK);
	         return response;
	     }else{
	         return null;
	     }
	 } catch (IOException e) {
	     e.printStackTrace();
	 }
	 return null;
 }

前端代码举例

引入axios.min.js文件

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

 axios({
     method:"post",
     url: "/getWavFile",
     params: {fileName: wavName},
     responseType:'arraybuffer',
     headers: { 'Accept': '*/*', 'Content-Type': 'audio/wav' }
 }).then(data => {
     if(data.data.byteLength > 0){
         blob = new Blob([data.data], {type: 'audio/wav'});
         let audio = document.createElement('audio');
         audio.src = URL.createObjectURL(blob);
         audio.play();
     }else{
         alert("未查询到记录");
     }
 }).catch(function() {
     alert("未查询到记录");
 });