前后端实现图片预览

1、背景

今天做了一个图片预览，碰到了3个问题：
1、要做这个效果，后台要做些什么
2、前端要怎么做
3、请求头中地址如何获取（前后端）
直接上代码（项目：springboot + vue）

1、后台部分

fileUtil.java

//这是这个工具类中的一个方法
// 下面的savePath 是文件上传时的根目录 下面图中可以看到这个值
public String viewPicture(HttpServletResponse response,String filePath) {
		
		String format = filePath.substring(filePath.lastIndexOf(".") + 1);
		File file = new File(savePath + filePath);
		try {

				if (file.exists() && file.isFile()) {
					//读取图片文件流
					BufferedImage image = ImageIO.read(new FileInputStream(file));
					//将图片写到输出流
					ImageIO.write(image, format, response.getOutputStream());
					return null;
				} else {
					return "文件不存在";
				}

		} catch (IOException e) {
			return "预览失败";
		}

	}
	

	//下面这行代码是swagger中的 ，这个不用管，与图片预览这一功能无关的代码
	//@ApiOperation(value = "查看图片的接口",httpMethod = "GET")

	//url 就是 文件在数据库中存储的路径，我这是前端可以直接拿到该字段，如果前端能传图片记录的id过来，后台可以通过这个id拿到这个路径 

	//fileUtil ,这是我创建的一个文件的工具类 ，
	//我这是做了配置（看下图），注意：我这用到的是springboot ，笨一点的办法就是 通过new FileUtil（） 拿到 fileUtil new出来的话下面被的代码就不要了，
	
	@Autowired//here 不要了
	private FileUtil fileUtil;//here 不要了

	@GetMapping("/view")
	public CommonReturn viewPicture(@RequestParam("url") String url,HttpServletResponse response,HttpServletRequest request){

		
		String fileResult = fileUtil.viewPicture(response,url);
		if(fileResult == null){

			return CommonReturn.initResult(1,"文件预览成功",str);
		} else {

			return CommonReturn.initResult(-1,fileResult,url);
		}
	}

2、前端 （vue）

//页面上有个这个东西就可以了 img 标签、和一个查看按钮（按钮要绑定事件） 、直接将刚发送请求的请求地址作为src的值

	<div style="text-align: center;height:400px">
        <img  :src="picturePath" style="width: 100%;height: 100%" />
        <button type="button">查看图片</button>
    </div>

点击查看按钮执行下面方法

//这里用到的是vue 请求发送用到了 axios
 showPicture(picturePath){
        var _this = this;
        _this.$axios.get('/api/picture/view',{params:{url:picturePath}}).then(res =>{
          _this.picturePath= res.request.responseURL;//这一行下面进行解释
          this.seePictureDialogVisible = true//发送请求就行，这行不用管，就是之前写好的那个接口
        });

3、前后端如何拿到请求的地址（含参数的）

//请求带参数到请求路径里面了，浏览器会对该路径进行处理，不能进行拼接拿到，下面讲怎么拿到它

（1）前端

 _this.$axios.get('/api/picture/view',{params:{url:picturePath}}).then(res =>{
          console.log(res);//在发送请求后的回调中打印 回调参数 res ，会得到下图
          _this.picturePath= res.request.responseURL;
          this.seePictureDialogVisible = true
        });

从这张图中可以看到我们要的东西就是 responseURL

res.request.responseURL;//可以通过这行代码拿到

（2）后端

String str = "http://" + request.getServerName() //服务器地址
				+ ":"
				+ request.getServerPort()           //端口号
				+ request.getContextPath()      //项目名称
				+ request.getServletPath()      //请求页面或其他地址
				+ "?" + (request.getQueryString()); //参数
		System.out.println(str);