springboot图片上传

最新推荐文章于 2024-07-07 11:22:54 发布
最新推荐文章于 2024-07-07 11:22:54 发布
阅读量165 收藏
点赞数 1
分类专栏： 图片上传 文章标签： java vue.js spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44259829/article/details/109289594
版权

图片的上传

这是我设计的设计库，不好，请大家多多见谅

CREATE TABLE `sys_user` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户id',
  `user_name` varchar(255) DEFAULT NULL COMMENT '用户名',
  `user_realname` varchar(255) DEFAULT NULL COMMENT '用户真实名',
  `user_sex` int(255) DEFAULT NULL COMMENT '用户性别  0-女 1-男',
  `user_age` int(255) DEFAULT NULL COMMENT '用户年龄',
  `user_phonenum` varchar(255) DEFAULT NULL COMMENT '用户电话',
  `user_pic` varchar(255) DEFAULT NULL COMMENT '用户图片',
  `wx_openid` varchar(255) DEFAULT NULL COMMENT '微信登陆',
  `qq_openid` varchar(255) DEFAULT NULL COMMENT 'QQ登录',
  `user_password` varchar(255) DEFAULT NULL COMMENT '用户密码',
  `user_office` varchar(255) DEFAULT NULL COMMENT '用户邮箱',
  `user_del` varchar(255) DEFAULT NULL COMMENT '用户描述',
  PRIMARY KEY (`user_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

jpa生成的实体类

package com.zhl.xbshopping.entity;

import javax.persistence.*;
import java.io.Serializable;
import java.util.Objects;

@Entity
@Table(name = "sys_user", schema = "xbshopping", catalog = "")
public class SysUser implements Serializable {
    private int userId;
    private String userName;
    private String userRealname;
    private Integer userSex;
    private Integer userAge;
    private String userPhonenum;
    private String userPic;
    private String wxOpenid;
    private String qqOpenid;
    private String userPassword;
    private String userOffice;
    private String userDel;

    @Id
    @Column(name = "user_id")
    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }

    @Basic
    @Column(name = "user_name")
    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    @Basic
    @Column(name = "user_realname")
    public String getUserRealname() {
        return userRealname;
    }

    public void setUserRealname(String userRealname) {
        this.userRealname = userRealname;
    }

    @Basic
    @Column(name = "user_sex")
    public Integer getUserSex() {
        return userSex;
    }

    public void setUserSex(Integer userSex) {
        this.userSex = userSex;
    }

    @Basic
    @Column(name = "user_age")
    public Integer getUserAge() {
        return userAge;
    }

    public void setUserAge(Integer userAge) {
        this.userAge = userAge;
    }

    @Basic
    @Column(name = "user_phonenum")
    public String getUserPhonenum() {
        return userPhonenum;
    }

    public void setUserPhonenum(String userPhonenum) {
        this.userPhonenum = userPhonenum;
    }

    @Basic
    @Column(name = "user_pic")
    public String getUserPic() {
        return userPic;
    }

    public void setUserPic(String userPic) {
        this.userPic = userPic;
    }

    @Basic
    @Column(name = "wx_openid")
    public String getWxOpenid() {
        return wxOpenid;
    }

    public void setWxOpenid(String wxOpenid) {
        this.wxOpenid = wxOpenid;
    }

    @Basic
    @Column(name = "qq_openid")
    public String getQqOpenid() {
        return qqOpenid;
    }

    public void setQqOpenid(String qqOpenid) {
        this.qqOpenid = qqOpenid;
    }

    @Basic
    @Column(name = "user_password")
    public String getUserPassword() {
        return userPassword;
    }

    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }

    @Basic
    @Column(name = "user_office")
    public String getUserOffice() {
        return userOffice;
    }

    public void setUserOffice(String userOffice) {
        this.userOffice = userOffice;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        SysUser sysUser = (SysUser) o;
        return userId == sysUser.userId &&
                Objects.equals(userName, sysUser.userName) &&
                Objects.equals(userRealname, sysUser.userRealname) &&
                Objects.equals(userSex, sysUser.userSex) &&
                Objects.equals(userAge, sysUser.userAge) &&
                Objects.equals(userPhonenum, sysUser.userPhonenum) &&
                Objects.equals(userPic, sysUser.userPic) &&
                Objects.equals(wxOpenid, sysUser.wxOpenid) &&
                Objects.equals(qqOpenid, sysUser.qqOpenid) &&
                Objects.equals(userPassword, sysUser.userPassword) &&
                Objects.equals(userOffice, sysUser.userOffice)&&
                Objects.equals(userDel, sysUser.userDel);
    }

    @Override
    public int hashCode() {
        return Objects.hash(userId, userName, userRealname, userSex, userAge, userPhonenum, userPic, wxOpenid, qqOpenid, userPassword, userOffice);
    }

    @Basic
    @Column(name = "user_del")
    public String getUserDel() {
        return userDel;
    }

    public void setUserDel(String userDel) {
        this.userDel = userDel;
    }

    @Override
    public String toString() {
        return "SysUser{" +
                "userId=" + userId +
                ", userName='" + userName + '\'' +
                ", userRealname='" + userRealname + '\'' +
                ", userSex=" + userSex +
                ", userAge=" + userAge +
                ", userPhonenum='" + userPhonenum + '\'' +
                ", userPic='" + userPic + '\'' +
                ", wxOpenid='" + wxOpenid + '\'' +
                ", qqOpenid='" + qqOpenid + '\'' +
                ", userPassword='" + userPassword + '\'' +
                ", userOffice='" + userOffice + '\'' +
                ", userDel='" + userDel + '\'' +
                '}';
    }
}

这是Result实体类，用来处理返回的结果集

package com.zhl.xbshopping.entity;

public class Result {

    //返回信息
    private String message;

    //返回数据
    private Object data;

    //返回成功或失败
    private boolean flag;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public Result(boolean flag,String message, Object data ) {
        this.message = message;
        this.data = data;
        this.flag = flag;
    }

    public Result(boolean flag ,String message) {
        this.message = message;
        this.flag = flag;
    }
}

LoginUserUtil的代码

package com.zhl.xbshopping.util;

import com.zhl.xbshopping.entity.SysUser;
import com.zhl.xbshopping.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Component;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@Component
public class LoginUserUtil {
    private static RedisTemplate redisTemplate;


    private static HttpSession session;


    private static HttpServletRequest request;


    private static UserService userService;

    @Autowired
    public void setRedisTemplate(RedisTemplate redisTemplate) {
        LoginUserUtil.redisTemplate = redisTemplate;
    }

    @Autowired
    public void setSession(HttpSession session) {
        LoginUserUtil.session = session;
    }


    @Autowired
    public void setRequest(HttpServletRequest request) {
        LoginUserUtil.request = request;
    }

    @Autowired
    public void setUserService(UserService userService) {
        LoginUserUtil.userService = userService;
    }

    public static SysUser getLoginUser(){
        Integer userId = (Integer) session.getAttribute("userId");
        if (userId != null){
            SysUser user = (SysUser)redisTemplate.opsForValue().get("loginUser:" + userId);
            if (user == null){
                userService.findById(userId);
                //续期
                redisTemplate.opsForValue().set("loginUser:"+userId,user);
            }
            return user;
        }
        Cookie cookie = getCookie("userId");

        if (cookie != null){
            userId = Integer.parseInt(cookie.getValue());
            SysUser user= (SysUser) redisTemplate.opsForValue().get("loginUser:"+userId);
            if (user == null){
                user =  userService.findById(userId);
                redisTemplate.opsForValue().set("loginUser:"+userId,user);
            }
            return user;
        }
        return null;
    }
    private static Cookie getCookie(String cookieName) {
        Cookie[] cookies = request.getCookies();
        if (cookies != null){
            for (Cookie cookie : cookies){
                if (cookie.getName().equals(cookieName)){
                    return cookie;
                }
            }
        }
        return null;
    }
    //获取当前登录用户的id
    public static Integer getId(){
        if (getLoginUser() != null){
            return getLoginUser().getUserId();
        }
        return null;
    }
}

XBConfiguration的代码

package com.zhl.xbshopping.config;

import com.zhl.xbshopping.code.GenerateImageCodeServlet;
import com.zhl.xbshopping.interceptor.LoginInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.servlet.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class XBConfiguration extends WebMvcConfigurerAdapter {

    //映射application.yml中file下requestPath的路径：/upload/**
    @Value("${file.requestPath}")
    private String requestPath;

    //映射application.yml中file下dir的路径：D:/xbshopping/src/main/resources/upload/
    @Value("${file.dir}")
    private String dir;

    //映射/upload下的路径取磁盘找，资源处理器
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(requestPath).addResourceLocations("file:"+dir);
    }

}

config包里面放的文件就是配置文件，用来配置映射路径用的，util包里是用来做获取登陆用户，有处理session、cookie，最后，就是resources文件夹下，存放一个文件夹用来存放图片的
这就是项目需要的文件目录

接下来就是先处理配置application.yml文件先,其中file：requestPath：是放行在upload文件夹下的所有资源，其实也就放行图片，dir就是我upload的绝对路径，你可以在upload文件上，鼠标单击右键点copy–》Absolute Path，
然后，粘贴，记住这个的 “/” ，的方向，要跟我的一样，复制下来的跟我方向不一样，记得修改，同时，在upload后面要加上“/”,看我的代码进行修改

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/xbshopping?serverTimezone=CTT
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    database: mysql
  redis:
    password: 123456
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
file:
  requestPath: /upload/**
  dir: D:/xbshopping/src/main/resources/upload/

接下来从控制层开始写
controller层的代码

@RestController
@RequestMapping("/user")
public class UserController {
   @Autowired
    UserService userService;

    @Autowired
    RedisTemplate redisTemplate;
 //图片上传
    @PostMapping("/uploadPic")
    public Result update(MultipartFile pic) throws Exception{
        //获取资源文件的名，也就是文件上传的名字
        String filename = pic.getOriginalFilename();
        //如sbcd.png(从.开始截取)，取文件后缀名样式
        String substring = filename.substring(filename.lastIndexOf("."));
        //给文件重新弄个文件名，避免文件被覆盖
        filename = UUID.randomUUID().toString() + substring;
        //文件存放路径(我放了相对路径，不行之后，我就用了绝对路径，在项目的resources文件夹下，创建了一个upload文件夹，用来放图片)
        String dirPath = "D:/xbshopping/src/main/resources/upload/"+filename;
        //写出图片
        pic.transferTo(new File(dirPath));
        //网络上文件地址
        String url = "http://localhost:8080/upload/"+filename;
        //更改数据库中的地址
       userService.updatePicUrl(LoginUserUtil.getId(),url);
        //将当前登录用户的图片路径也进行更改
       SysUser loginUser = LoginUserUtil.getLoginUser();
       loginUser.setUserPic(url);
        //更改Redis中的用户信息
       redisTemplate.opsForValue().set("loginUser:"+loginUser.getUserId(),loginUser,30,TimeUnit.MINUTES);
        //把url带到前端（更改localStorage中的url地址）
        return new Result(true,"上传成功",url);
    }
}

如下图的upload就用来放上传图片的地方
在这里插入图片描述

userService层的代码

public interface UserService {

	void updatePicUrl(Integer id, String url);
	
	 SysUser findById(Integer id);
}

userServiceImpl层的代码

@Service
public class UserServiceImpl implements UserService {

	@Autowired
    UserMapper userMapper;

	//如果要进行增、改、删就要加@Transactional注解标记
  	@Override
    @Transactional
    public void updatePicUrl(Integer id, String url) {
        userDao.updatePicUrl(id,url);
    }
    
    @Override
    public SysUser findById(Integer id) {
        return userDao.findById(id).get();
    }

}

userMapper层的代码

//JpaRepository后面的<>里面的参数，第一个是参数是哪个实体类，如：User实体类，第二个参数是实体类主键类型，如：主键是id，实体类的主键是Long id，那么第二参数就是Long
public interface UserMapper extends JpaRepository<User,Long> {
//如果用Query查询进行数据库增、改、删就要添加@Modifying注解
//下面的？1和？2是相对应传过来的形参的，如，？1对应第一个形参，也就是Long id，？2对应的就是String url
  	@Query("update SysUser set userPic = ?2 where userId = ?1")
    @Modifying
    void updatePicUrl(Integer id, String url);

前端代码：
由于太多东西了，就摘取重点部分给你们看，其他的你们自己看着处理，出错的话，基本也就导包的问题了

         <div class="user__img">
               <img :src="user.userPic" alt="" id="pic">
         </div>
         <input type="file" class="hidden uploadImg" @change="uploadPic" id="picFile">

<script src="../vendor/jquery/jquery.min.js"></script>
		<script src="../bootstrap/js/bootstrap-select.min.js"></script>
		<script src="../vendor/popper.js/umd/popper.min.js"></script>
		<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="../vendor/jquery.cookie/jquery.cookie.js"></script>
		<script src="../vendor/chart.js/Chart.min.js"></script>
		<script src="../vendor/jquery-validation/jquery.validate.min.js"></script>
		<script src="../js/charts-home.js"></script>
		<script src="../js/front.js"></script>
		<script src="../js/custom.js"></script>
		<script src="../js/layer.js"></script>
		<script src="../js/vue-2.6.11.js"></script>
		<script src="../js/axios-0.19.2.min.js"></script>
		<script src="../js/jquery-cookie-1.4.1.js"></script>
		<!--下面这个是我等下要写的前端上传逻辑的Vue.js-->
		<script src="../vue/userLook.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#pic").click(function() {

					$("#picFile").click();

				})
				$('#picFile').change(function() {
					layer.msg('上传成功');
				});
			})
		</script>

userLook.js的代码

new Vue({
    el:'#app',
    data:{
        
        user: JSON.parse(localStorage.getItem("loginUser")),
       
    },
    methods:{
		uploadPic:function (){
            let formData = new FormData();
            formData.append("pic",document.getElementById("picFile").files[0]);
            axios({
                url:'/user/uploadPic',
                method:"post",
                data: formData,
                contentType:'multipart/form-data'
            }).then(response=>{
                if (response.data.flag){
                    this.user.userPic = response.data.data;
                    localStorage.setItem("loginUser",JSON.stringify(this.user))
                }
                layer.msg(response.data.message)
            })
            this.formData=''
        }
	}

由于这个是项目有很多东西，所以，我尽量去截取单单关于上传文件这个方法等等的东西啦，如果，截取漏了，那就留言一下，后期，我去补，最后，这也是我第一次写成功图片上传，如果，大家有一些问题，先百度，不行，在留言，如果，我能解决我就回，不行， 我就拿问题去一些大佬帮你问问怎么解决，不过，你们最好自己先去问问你身边的大佬，因为我很少来CSDN玩，基本去B站嗨了，如果，上面的代码部分有错误，麻烦指出来，我会积极纠正的，那就先谢谢大佬们指出错误和纠正

喝茶一族
关注
专栏目录
springboot上传图片
qq_45870222的博客
11-21 2947
springboot上传图片及传递其他字段
SpringBoot图片上传和访问路径映射
08-25
SpringBoot图片上传和访问路径映射 SpringBoot图片上传和访问路径映射是指在 SpringBoot 框架下实现图片上传和访问路径映射的功能。下面将详细介绍 SpringBoot 图片上传和访问路径映射的实现步骤。 图片上传工具...
springboot-图片上传
u013008898的博客
04-22 2757
controller: @Controller public class FileController { @RequestMapping(value = "/api/v1/gopage") public Object index() { return "index"; } ...
如何在Spring Boot中实现图像上传和处理
最新发布
聚娃科技开发者博客
07-07 491
通过本文的讲解，我们学习了如何在Spring Boot应用中实现图像上传和简单的图像处理功能。从创建REST接口处理上传请求到存储图像，再到使用图像处理服务对图像进行操作，Spring Boot为我们提供了强大的支持和便捷的开发体验，帮助我们快速实现复杂的图像处理需求。大家好，我是微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！首先，我们需要设计一个REST接口来处理图像上传。除了上传外，有时我们还需要在应用中对图像进行处理，例如缩放、裁剪、添加水印等操作。以下是一个简单的图像处理示例。
SpringBoot-图片上传
qq_19331985的博客
02-02 893
SpringBoot-图片上传 1. 准备 1.1 springboot上传文件大小配置 servlet: multipart: max-file-size: 128MB #上传文件总大值 max-request-size: 10MB #单个文件的最大值 1.2 在配置文件重配置上传地址 在进行文件上传时会存在上传到多个位置，可以通过如下配置进行区分，有效统一地址操作，避免不必要的误操作。 #文件上传操作 uploadFile: resourceHandl
SpringBoot 图片上传
临安剑客的博客
04-19 1836
v-md-editor 官网：https://code-farmer-i.github.io/vue-markdown-editor/zh/关于 v-md-editor 图片上传，参考：https://code-farmer-i.github.io/vue-markdown-editor/zh/senior/upload-image.html最后感慨一句，vue3 整合 v-md-editor 成功后，是真的帅啊！
Springboot图片上传
weixin_57169969的博客
08-12 1195
Springboot项目中的图片上传
vue+springboot图片上传和显示的示例代码
10-15
在本文中，我们将深入探讨如何实现一个基于Vue和...这个示例代码为开发者提供了一个完整的流程，帮助他们理解和实现图片上传与显示功能，对于需要在前后端分离项目中集成此类功能的开发人员来说，是非常有价值的参考。
springboot实现上传图片添加水印
12-21
在Spring Boot框架中实现图片上传并添加水印的功能，是一个常见的需求，特别是在开发涉及多媒体内容的Web应用时。下面将详细介绍这个过程，并涵盖相关的技术点。 首先，我们需要了解Spring Boot如何处理文件上传。...
SpringBoot之图片上传与回显
08-18
在SpringBoot框架中，图片上传和回显是常见的功能需求，尤其对于开发涉及用户交互的Web应用时。本文将深入探讨如何实现这个功能，并提供一个简单易懂的实践示例。 首先，我们要理解SpringBoot的核心组件SpringMVC，...
springboot 图片上传
张小三的博客
01-21 588
文章目录准备文件上传工具类 准备 <!--图片压缩--> <dependency> <groupId>net.coobird</groupId> <artifactId>thumbnailator</artifactId> <version>0.4.14</version> </dependency> 文件上传工具类 说明： 文件上传到服务器时，按照日期来存放文件。 工具类名
SpringBoot的图片上传
玖柒IT
05-09 965
一个基于Spring Boot框架的简单文件上传功能的实现方式
spring boot上传图片
龙傲宇
02-28 440
今天早上改bug时候发现，上传图片一直出错是由于我写的小前端代码有问题，所以按F12一直都报time out的错，即使在程序中加了logger也一直显示不出来。一直也没法定位。 改为使用postman测试后，发现是由于自己的前端问题，前端都没有成功调用那个接口。在网上搜了一下教程 postman测试上传图片接口步骤教程_祈澈菇凉-CSDN博客 然后在本地就可以上传成功了。 之后再贴上成功上传的代码。 现在需要对地址进行调试，需要把本地地址改为服务器地址。 ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值