图片上传到数据库,和图片页面回显

最新推荐文章于 2023-02-03 16:07:37 发布

原创最新推荐文章于 2023-02-03 16:07:37 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue.js #后端

本文介绍使用Java实现用户图片上传的功能，包括前端利用ZUI组件上传图片、后端接收和处理图片，并将图片存储在数据库中。同时，还介绍了如何从数据库中读取图片并展示在前端页面上。

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"/>

完!!!