java存储用户图片和图片展示
1.图片上传
1.1前端利用zui上传图片组件来上传图片
<div id="uploaderExample" class="uploader">
<div class="file-list col-xs-9" data-drag-placeholder="请拖拽文件到此处" style="display: inline-block;padding: 0px;"></div>
<button type="button" class="btn btn-primary uploader-btn-browse" style="float: right;" onclick="uploadFile()">
<i class="icon icon-cloud-upload"></i> 图片选择
</button>
</div>
选择需要上传的图片或者拖拽上传
1.2在controller层利用MultipartFile来接收文件
@PostMapping("/setUserMsg")
public JsonData setUserMsg(HttpServletRequest request,@RequestParam(name= "file", required = false) MultipartFile file) throws Exception {
return userService.setUserInfo(file);
}
1.3在service层对图片进行处理
public JsonData setUserMsg(MultipartFile file){
//判断file是否为空
if(file != null){
//创建一个pojo对象类型,存放用户图片信息
UserInfo userInfo = new UserInfo();
//根据需求确定是哪个用户的图片,设置用户信息
userInfo.setUserId(xxx);
......
userInfo.setPicture(file.getBytes());//获取图片编码格式的字节数组
return JsonData.buildSuccess(userMapper.insert(userInfo));
}
}
1.4在mapper层创建一个接收对象类型的参数的接口方法
int insert(UserInfo userInfo);
1.5xml文件,此处图片格式是设置为了二进制大文件类型(blob)
<insert id="insert" parameterType="xxx.xxx.UserInfo">
insert into UserInfo(USERID, XXX,Picture)
values ( #{userid,jdbcType=VARCHAR}, #{XXX,jdbcType=DECIMAL}, #{qzxx,jdbcType=BLOB})
</insert>
此时图片就成功保存到数据库了,记得给每个图片生成一个ID,因为每个用户可以上传多张图片
2.图片回显
2.1html页面
<div class="row-fluid">
<ul class="ace-thumbnails">
<template v-for="qm in list">
<li style="margin-right: 20px;">
<div>
<img style="cursor: pointer;" height="50" v-bind:src="img_url + qm.ptid"/>
</div>
</li>
</template>
</ul>
</div>
2.2url方法
img_url: 'xxx/xxx/showPhoto/'
获取用户list,之后遍历用户id,因为同一用户可能上传过多张照片,最后通过用户id获取图片.
@GetMapping("/getUserList")
public JsonData getUserList(HttpServletRequest request) {
//根据登录用户获取登录useid
User user = userService.getLoginUser(request);
return userService.getUserList(user.getUserid());
}
service
public JsonData getUserList(String userId) {
return JsonData.buildSuccess(userMapper.selectAllByUserId(userId));
}
mapper接口,这里需要返回一个list,每条记录为一个map或者一个user对象
List<UserInfo> selectAllByUserId(@Param(useId) String userId);//单个参数可以不写@param
xml文件
<select id="selectAllByUserId" resultMap="BaseResultMap">
select USERID, XXX,PTID
from USERINFO
where USERID = #{userId,jdbcType=VARCHAR}
</select>
此处根据自己项目所需查询,也可只查询图片ID.
2.3通过图片ID来遍历展示图片(记得设置图片展示宽高)
@GetMapping("/showDzqmPhoto/{ptid}")
public void showDzqmPhoto(@PathVariable(name= "ptid") String ptid, HttpServletResponse response) {
userService.showDzqmPhoto(ptid, response);
}
此处需要用到响应HttpServletResponse
public void showDzqmPhoto(String ptid, HttpServletResponse response) {
//图片id不为空就获取图片
if(ptid==null||"undefined".equals(ptid)||"".equals(ptid)) {
return;
}
UserInfo dzqz = userMapper.selectByPrimaryKey(ptid);//通过图片id获取这个pojo对象
//创建一个输出流
OutputStream os = null;
try {
os = response.getOutputStream();
os.write(dzqz.getPictrue());//上面setPictrue的图片的byte数组字段
os.flush();
} catch(Exception e) {
logger.error(e.getMessage(),e);//打印异常信息
} finally {
if(os != null) {
try {
os.close();//关闭流
} catch (IOException e) {
logger.error(e.getMessage(),e);
// e.printStackTrace();
}
}
}
}
此方法不需要返回,因为在流中就刷出去了,中间的mapper和xml文件就不写了,就是一个通过useid查询对象信息的sql.
此时页面上通过vue绑定的url地址处就会展示出所有符合条件的图片
<img style="cursor: pointer;" height="50" v-bind:src="img_url + qm.ptid"/>
完!!!