【SSH项目实战】国税协同平台-5.头像上传功能

声明：本文为博主原创文章，未经博主允许不得转载。

之前我们完成了用户管理的增删改查功能，来回顾一下我们获取用户列表时的过程:


记得用户添加的时候没有上传头像，下面我们来完成添加用户时，头像上传的功能。
我们上传头像有以下步骤:
1、获取头像（file,contentType,filename）

2、保存头像
2.1、保存头像到指定的文件目录中
2.2、设置用户头像路径

下面是详细实现:
在用户管理的添加、编辑页面中，可以上传用户的头像；页面中对头像字段引用type=file的文本域。

[html] view plaincopy

1. <input type="file" name="headImg"/>   

可以看到我们之前已经写好:

[html] view plaincopy

1. <tr>  
2.     <td class="tdBg" width="200px">头像：</td>  
3.     <td>  
4.         <input type="file" name="headImg"/>  
5.     </td>  
6. </tr>  

之后UserAction接收文件需要配置的3个基本属性变量：

[java] view plaincopy

1. private File headImg;  
2. private String headImgContantType;  
3. private String headImgFileName;  

并添加相应的get与set方法

接下来我们在Action的add()方法中添加用户上传头像的代码(将头像文件保存在服务器的upload/user目录下，文件的名称以uuid重命名)

[java] view plaincopy

1. //保存新增  
2. public String add(){  
3.     try {  
4.         if(user!=null){  
5.             //处理头像  
6.             if(headImg!=null){  
7.                 //1、保存头像到upload/user  
8.                 //获取保存路径的绝对地址  
9.                 String filePath=ServletActionContext.getServletContext().getRealPath("upload/user");  
10.                 //生成带格式的随机文件名称  
11.                 String fileName=UUID.randomUUID().toString()+headImgFileName.substring(headImgFileName.lastIndexOf("."));  
12.                 //复制文件  
13.                 FileUtils.copyFile(headImg, new File(filePath,fileName));  
14.                   
15.                 //2、设置用户头像路径  
16.                 user.setHeadImg("user/"+fileName);  
17.             }  
18.               
19.             userService.save(user);  
20.         }  
21.     } catch (IOException e) {  
22.         // TODO Auto-generated catch block  
23.         e.printStackTrace();  
24.     }  
25.     return "list";  
26. }  

下面我们进行测试，重启服务器，点击添加按钮，我们添加一张图片：


我们暂时没有查看界面，我们去数据库查看出现了图片路径:


然后发现tomcat中我们工程的upload/user/下出现了这个图片:

现在我们在编辑界面添加图片的链接:

[html] view plaincopy

1. <tr>  
2.     <td class="tdBg" width="200px">头像：</td>  
3.     <td>  
4.         <s:if test="%{user.headImg != null && user.headImg != ''}">  
5.             <img src="${basePath}upload/<s:property value="user.headImg" />" width="100" height="100"/>  
6.     <s:hidden name="user.headImg"/>  
7.         </s:if>  
8.         <input type="file" name="headImg"/>  
9.     </td>  
10. </tr>  

然后我们点击编辑界面，发现用户的头像就可以看到啦:


然后我们给编辑界面也加上传功能:

[java] view plaincopy

1. //保存编辑  
2. public String edit(){  
3.     try {  
4.         if(user!=null){  
5.             //处理头像  
6.             if(headImg!=null){  
7.                   
8.                 //1、保存头像到upload/user  
9.                 //获取保存路径的绝对地址  
10.                 String filePath=ServletActionContext.getServletContext().getRealPath("upload/user");  
11.                 //生成带格式的随机文件名称  
12.                 String fileName=UUID.randomUUID().toString()+headImgFileName.substring(headImgFileName.lastIndexOf("."));  
13.                 //复制文件  
14.                 FileUtils.copyFile(headImg, new File(filePath,fileName));  
15.                   
16.                 //把旧头像删除  
17.                 File file=new File(filePath+user.getHeadImg().substring(0, 4));  
18.                 file.delete();  
19.                   
20.                 //2、设置用户头像路径  
21.                 user.setHeadImg("user/"+fileName);  
22.             }  
23.               
24.             userService.update(user);  
25.         }  
26.     } catch (IOException e) {  
27.         // TODO Auto-generated catch block  
28.         e.printStackTrace();  
29.     }  
30.     return "list";  
31. }  

测试:

发现图片更改成功,旧头像也被删除:

至此，我们的图片上传功能完成！