Feign调用预览图片

不安分的猿人 25天前 ⋅ 71 阅读

我先说下背景,我们这边有个平台组,文件服务就是平台组的服务。文件服务包括文件上传下载功能,服务的文件是保存在mongodb中。(注:平台组的代码很难改动,我只有自己想办法解决问题!)

实现图片预览的思路是这样的:

  1. Feign调用文件服务的,获取feign.Response 对象。
  2. 将获取Feign.Response对象的输出流,封装一层,返回给前台。
  3. 前台通过接收到二进制文件通过Blob转化,就可直接预览图片。

具体的个步骤的关键代码如下:

1. 文件服务文件下载接口,代码如下: 

@RequestMapping(value = "/downloadFile")
    public void downloadFile(@RequestParam(name = "file_id") String fileId, HttpServletRequest request, HttpServletResponse response) throws Exception {
        Query query = Query.query(Criteria.where("_id").is(fileId));
        // 查询单个文件
        GridFSDBFile gfsfile = gridFsTemplate.findOne(query);
        if (gfsfile == null) {
            return;
        }
        String fileName = gfsfile.getFilename().replace(",", "");
        //处理中文文件名乱码
        if (request.getHeader("User-Agent").toUpperCase().contains("MSIE") ||
                request.getHeader("User-Agent").toUpperCase().contains("TRIDENT")
                || request.getHeader("User-Agent").toUpperCase().contains("EDGE")) {
            fileName = java.net.URLEncoder.encode(fileName, "UTF-8");
        } else {
            //非IE浏览器的处理:
            fileName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
        }
        // 通知浏览器进行文件下载
        response.setContentType(gfsfile.getContentType());
        response.setHeader("Content-Disposition", "attachment;filename=\"" + fileName + "\"");
        gfsfile.writeTo(response.getOutputStream());
	}

2.调用方图片预览的代码如下:

@GetMapping("/preview/{fileId}")
	public Response<byte[]> imagePreview(@PathVariable String fileId) throws Exception{
		fiegn.Response response = fileClientService.downloadFile(fileId); // feign调用获取下载接口的响应
		Response.Body body = response.body();
		HttpHeaders heads = new HttpHeaders();
		heads.setContentType(MediaType.valueOf(MediaType.IMAGE_JPEG_VALUE));
		return new Response<byte[]>(IoUtil.readBytes(body.asInputStream()),heads, HttpStatus.OK);
	}

3.前台代码如下: 

var imageType = xhr.getResponseHeader("Content-Type");
var blob = new Blob([xhr.response], { type: imageType });
var imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
$('#image').attr("src", imageUrl);

 


全部评论: 0

    我有话说: