spring boot项目-上传头像

1.mapper接口文件

   Integer updateAvatarByUid(
            @Param("uid") Integer uid,//用户ID
            @Param("avatar") String avatar,//图片路径
            @Param("modifiedUser") String modifiedUser,//修改人
            @Param("modifiedTime") Date modifiedTime);//修改时间

2.mapper.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.store.mapper.UserMapper">
    <resultMap id="UserEntityMap" type="com.example.store.pojo.User">
        <id column="uid" property="uid"/>
        <result column="is_delete" property="isDelete"/>
        <result column="created_user" property="createdUser"/>
        <result column="created_time" property="createdTime"/>
        <result column="modified_user" property="modifiedUser"/>
        <result column="modified_time" property="modifiedTime"/>
    </resultMap>

    <update id="updateAvatarByUid">
        UPDATE
        t_user
        SET
        avatar = #{avatar},
        modified_user = #{modifiedUser},
        modified_time = #{modifiedTime}
        WHERE
        uid = #{uid}
    </update>
</mapper>

3.service接口

 /**
     * 上传头像
     * @param uid
     * @param username
     * @param avatar
     */
    void changeAvatar(Integer uid, String username, String avatar);

4.service接口实现类

    /**
     * 上传头像
     * @param uid
     * @param username
     * @param avatar//图片路径
     */
    @Override
    public void changeAvatar(Integer uid, String username, String avatar) {
        User result = userMapper.findByUid(uid);
        if (result == null) {
            throw new UserNotFoundException("用户数据不存在");
        }
        Integer rows = userMapper.updateAvatarByUid(uid, avatar, username, new Date ());
        if (rows != 1) {
            throw new UpdateException("更新用户数据时错误");
        }
    }

5.controller层文件


    /** 头像文件大小的上限值(10MB) */
    public static final int AVATAR_MAX_SIZE = 10 * 1024 * 1024;
    /** 允许上传的头像的文件类型 */
    public static final List<String> AVATAR_TYPES = new ArrayList<String> ();

    /** 初始化允许上传的头像的文件类型 */
    static {
        AVATAR_TYPES.add("image/jpeg");
        AVATAR_TYPES.add("image/png");
        AVATAR_TYPES.add("image/bmp");
        AVATAR_TYPES.add("image/gif");
    }

    @PostMapping("change_avatar")
    public JsonResult<String> changeAvatar(@RequestParam("file") MultipartFile file, HttpSession session) {
        // 判断上传的文件是否为空
        if (file.isEmpty()) {
            // 是:抛出异常
            throw new FileEmptyException ("上传的头像文件不允许为空");
        }

        // 判断上传的文件大小是否超出限制值
        if (file.getSize() > AVATAR_MAX_SIZE) { // getSize():返回文件的大小,以字节为单位
            // 是:抛出异常
            throw new FileSizeException ("不允许上传超过" + (AVATAR_MAX_SIZE / 1024) + "KB的头像文件");
        }

        // 判断上传的文件类型是否超出限制
        String contentType = file.getContentType();
        // boolean contains(Object o):当前列表若包含某元素,返回结果为true;若不包含该元素,返回结果为false
        if (!AVATAR_TYPES.contains(contentType)) {
            // 是:抛出异常
            throw new FileTypeException ("不支持使用该类型的文件作为头像,允许的文件类型:" + AVATAR_TYPES);
        }

        // 获取当前项目的绝对磁盘路径
        String parent = session.getServletContext().getRealPath("upload");
        System.out.println(parent);
        // 保存头像文件的文件夹
        File dir = new File(parent);
        if (!dir.exists()) {
            dir.mkdirs();
        }

        // 保存的头像文件的文件名
        String suffix = "";
        //获取文件名
        String originalFilename = file.getOriginalFilename();
        //lastIndexOf的结果是该字符的下标。下标从0开始。
        int beginIndex = originalFilename.lastIndexOf(".");
        if (beginIndex > 0) {
            //substring是从该字符开始截取
            suffix = originalFilename.substring(beginIndex);
        }
        String filename = UUID.randomUUID().toString() + suffix;

        // 创建文件对象,表示保存的头像文件
        File dest = new File(dir, filename);
        // 执行保存头像文件
        try {
            file.transferTo(dest);
        } catch (IllegalStateException e) {
            // 抛出异常
            throw new FileStateException ("文件状态异常,可能文件已被移动或删除");
        } catch (IOException e) {
            // 抛出异常
            throw new FileUploadIOException("上传文件时读写错误,请稍后重新尝试");
        }

        // 头像路径
        String avatar = "/upload/" + filename;
        // 从Session中获取uid和username
        Integer uid = getUidFromSession(session);
        String username = getUsernameFromSession(session);
        // 将头像写入到数据库中
        userService.changeAvatar(uid, username, avatar);

        // 返回成功头像路径
        return new JsonResult<String>(OK, avatar);
    }

其中MultipartFile是是springmvc提供给我们的一个专门来接收前端文件的接口

6.前端表格

	<div class="panel-body">
						<!--上传头像表单开始-->
						<form action="/users/change_avatar"
							  method="post"
							  enctype="multipart/form-data"
							  class="form-horizontal" role="form">
							<div class="form-group">
								<label class="col-md-2 control-label">选择头像:</label>
								<div class="col-md-5">
									<img id="img-avatar" src="../images/index/user.jpg" class="img-responsive" />
								</div>
								<div class="clearfix"></div>
								<div class="col-md-offset-2 col-md-4">
									<input type="file" name="file">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<input type="submit" class="btn btn-primary" value="上传" />
								</div>
							</div>
						</form>
					</div>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的 Spring Boot + Vue.js 项目中用户头像上传的代码。 前端代码: ``` <template> <div> <img :src="imageUrl" :alt="username" width="100"> <form> <input type="file" @change="onFileChange" accept="image/*"> <button type="button" @click="upload">上传头像</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { imageUrl: '', username: 'test' } }, methods: { onFileChange(e) { const file = e.target.files[0]; this.imageUrl = URL.createObjectURL(file); this.file = file; }, upload() { const formData = new FormData(); formData.append('file', this.file); formData.append('username', this.username); axios.post('/api/upload', formData).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); } } } </script> ``` 后端代码: ``` @RestController @RequestMapping("/api") public class UserController { @Autowired private UserService userService; @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE) public ResponseEntity<Object> uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("username") String username) { try { User user = userService.getUserByUsername(username); if (user != null) { String fileName = StringUtils.cleanPath(file.getOriginalFilename()); String fileExtension = fileName.substring(fileName.lastIndexOf(".")); String newFileName = UUID.randomUUID().toString() + fileExtension; String uploadDir = "uploads/"; String filePath = uploadDir + newFileName; FileUploadUtil.saveFile(uploadDir, newFileName, file); user.setAvatar(filePath); userService.saveUser(user); return ResponseEntity.ok().body("File uploaded successfully!"); } else { return ResponseEntity.badRequest().body("User not found!"); } } catch (Exception ex) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(ex.getMessage()); } } } ``` 其中,`FileUploadUtil` 是一个工具类,用于保存上传的文件到服务器。`UserService` 是一个服务类,用于处理与用户相关的业务逻辑。`User` 是一个实体类,用于映射数据库中的用户表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Amo@骄纵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值