后台根据地址传输二进制流，前台显示图片

最新推荐文章于 2025-06-17 08:35:53 发布

原创最新推荐文章于 2025-06-17 08:35:53 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

后端

5 篇文章

订阅专栏

本文详细介绍了如何在后端使用Java处理图片流并返回给前端，通过设置HTTP头实现二进制流数据传输，以及在前端利用XMLHttpRequest请求获取图片Blob数据并将其转换为图片源进行展示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、后台

 @RequestMapping(value="/getPicPathByPicId/{picId}",method=RequestMethod.GET)
    @ResponseBody
    public ResponseEntity<byte[]> getPicStream(@PathVariable("picId")String picId)throws IOException{
    	Upload sysFile = fileService.getFileById(Long.valueOf(picId));
    	String filePath = sysFile.getFilePath();
		File file = new File(filePath);
	    //http头部
	    HttpHeaders httpHeaders = new HttpHeaders();
	    //application/octet-stream ： 二进制流数据
	    httpHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM);
	    return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),httpHeaders, HttpStatus.CREATED);
    	
    }

2、前台

2.1、不能用ajax传输二进制流

2.2、status根据传输成功的status code决定

 function picFormatter(value,row, index){
        	 var  s = '<a class = "view"  href="javascript:void(0)">'+
  		   '<img id ="imgcontainer" style="width:300;height:40px;"/></a>';
        	var picId = row.picture;
        	var url = realPath+"/xzzf/file/getPicPathByPicId/"+ picId;
        	var xhr = new XMLHttpRequest();    
            xhr.open("get", url, true);
            xhr.responseType = "blob";
            xhr.onload = function() {
                if (this.status == 201) {
                    var blob = this.response;
                    var img = document.getElementById("imgcontainer");
                    img.onload = function(e) {
                      window.URL.revokeObjectURL(img.src); 
                    };
                    img.src = window.URL.createObjectURL(blob);
         } }
            xhr.send();
            return [s,].join('');
     	  
        }