Vue中前端请求后台,后台读取本地磁盘图片,到前端展示
Html代码<a class="btn btn-primary" @click="viewImg">查看图片</a><div id="viewUserImg"><img id="userImg" :src="imgUrl"><!--<img id="userImg" src="${request.contextPath}/user/vie
·
Html代码
<a class="btn btn-primary" @click="viewImg">查看图片</a>
<div id="viewUserImg">
<img id="userImg" :src="imgUrl">
<!--<img id="userImg" src="${request.contextPath}/user/viewImg?userId=1">-->
</div>
JavaScript代码
var vm = new Vue({
//当前vue对象接管的区域
el: '#test',
//属性
data: {
imgUrl: "user/viewImg"
},
//自定义方法
methods: {
viewImg: function () {
//这里映射的路径和你的包路径有关系,后台的映射路径可以根据具体的进行调整
//也可以在这里拼接参数,去后台查询,先查询图片地址,然后在操作
//vm.imgUrl = "user/viewImg?userId=1";
vm.imgUrl = "user/viewImg";
}
}
Java后台代码
/**
* 根据用户id,读取相关的用户图片信息
* @param userId 用户Id
* @return
*/
@RequestMapping("user/viewImg")
public void viewUserImg(@RequestParam("userId") String userId, HttpServletResponse response) {
//根据用户Id查询用户信息
//User user = userService.viewImg(userId, response);
try {
//根据用户的图片路径,创建文件
//File file = new File(user.getImgUrl());
File file = new File("D:\\userImg\\test.png");
FileInputStream fileInputStream = new FileInputStream(file);
long size = file.length();
byte[] temp = new byte[(int) size];
fileInputStream.read(temp, 0, (int) size);
fileInputStream.close();
byte[] data = temp;
response.setContentType("image/png");
OutputStream os = response.getOutputStream();
os.write(data);
os.flush();
os.close();
} catch (Exception e) {
e.printStackTrace();
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)