JAVA使用字节流将本地图片传到前端
01.基本介绍
在我们日常的开发中，会遇到对验证码的使用问题（验证码的作用这里不多多说，避免程序被恶意攻击等），如何是的前端和后端保持一致是一个问题，当然本程序不是介绍如何去写一个使用前端去显示一个验证码，并且验证码的值与后台的数据保持一致的问题，只是接一个使用java把本地图片写到前端html页面以提供一种思想去抛砖引玉。并且本博客是围绕一个使用java调用python获取中文分词的结果，以及与之对应的词云图片的系统进行展开的，在各个部分的技术要点讲解完了之后，博主将在最后将程序源码放到百度云上，供读者参考学习。
02.代码介绍
后台代码，这是一个servlet程序
public class WCServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String r = request.getParameter("r");
//使用字节流读取本地图片
ServletOutputStream out=null;
BufferedInputStream buf=null;
//创建一个文件对象，对应的文件就是python把词云图片生成后的路径以及对应的文件名
File file = new File("E:\\Java\\eclipse_code\\NLP\\WebContent\\source\\wordcloud.png");
try {
//使用输入读取缓冲流读取一个文件输入流
buf=new BufferedInputStream(new FileInputStream(file));
//利用response获取一个字节流输出对象
out=response.getOutputStream();
//定义个数组，由于读取缓冲流中的内容
byte[] buffer=new byte[1024];
//while循环一直读取缓冲流中的内容到输出的对象中
while(buf.read(buffer)!=-1) {
out.write(buffer);
}
//写出到请求的地方
out.flush();
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}finally {
if(buf!=null) buf.close();
if(out!=null) out.close();
}
//传输结束后，删除文件，可以不删除，在生成的图片中回对此进行覆盖
File file1 = new File("E:\\Java\\eclipse_code\\NLP\\WebContent\\source\\wordcloud.png");
file1.delete();
System.out.println("文件删除！");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
前端代码：
<!-- 词云 -->
<div class="row col-sm-12">
<button type="button" class="btn btn-default" id="picbtn" >云图</button>
<div align="center" id="dpic">
<img alt='文本分析的云图' src='' id='pic'>
</div>
</div>这里使用一个JavaScript去控制的在https://blog.csdn.net/meiqi0538/article/details/79861704已有介绍
<script type="text/javascript">
/* 在页面加载完成后使用*/
$(function(){
/*一个定时函数，获取时间的 */
setInterval(showtime,1000);
/* 函数处理，使用的是异步请求ajax技术*/
$("#sbtn").click(function(){
/* 创建一个layer load对象*/
var ii=layer.load();
/*ajax进行请求 */
$.ajax({
/*请求方式 */
type:'POST',
/*请求的地址 */
url:'${pageContext.request.getContextPath()}/nlp',
/* 请求的参数和内容*/
data:{text:$("#textareaCode").val()},
/* 数据格式为json*/
dataType:'json',
/* 请求成功后，返回结果result，写一个函数进行处理*/
success:function(result){
//清空之前的内容，避免数据都叠加在一起
$("#rview").empty();
/* 给指定区域写内容，也就是要显示的地方*/
$("#rview").prepend(result);
/*为标签写属性，这里我使用的是java的数据流方式传递图片到页面，类似于验证码原理 */
$("#pic").attr("src","${pageContext.request.contextPath }/wc");
/* 处理结束后关闭遮罩层*/
layer.close(ii);
}
});
});
});
function showtime(){
var t=new Date();
var weekday=new Array(7);
weekday[0]="周日";
weekday[1]="周一";
weekday[2]="周二";
weekday[3]="周三";
weekday[4]="周四";
weekday[5]="周五";
weekday[6]="周六";
document.getElementById("time").innerHTML="当前时间："+t.getFullYear()+"年"+(t.getMonth()+1)+"月"+t.getDate()+"日"
+weekday[t.getDay()]+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds();
}
</script>03.结果展示
这是python对javaweb前端传递的参数（文字）,分词结果，并产生的图片
