利用Springboot+vue实现图片上传至数据库并显示的全过程

 更新时间:2023年04月12日 09:59:12   作者:是阿覃呀!  
最近遇到个需求,需要将图片在前端上传到服务器进行保存,然后读取到前端进行展示,这篇文章主要给大家介绍了关于利用Springboot+vue实现图片上传至数据库并显示的相关资料,需要的朋友可以参考下

一、前端设置

前端是Vue + Element-UI 采用el-upload组件(借鉴官方)上传图片:

<el-upload
     ref="upload"
     class="avatar-uploader"
     action="/setimg"
     :http-request="picUpload"
     :show-file-list="false"
     :auto-upload="false"
     :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload">
   <img v-if="$hostURL+imageUrl" :src="$hostURL+imageUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>

<el-button type="primary" @click="submitUpload">修改</el-button>

action在这里可以随便设置,因为在后面有 :http-request 去自己设置请求,注意由于是自己写请求需要 :auto-upload=“false” ,并且由于是前后端连接要解决跨域问题,所以在 $hostURL+imageUrl 定义了一个全局变量:

//在main.js中
	Vue.prototype.$hostURL='http://localhost:8082'

在methods中:

methods:{
//这里是官方的方法不变
	handleAvatarSuccess(res, file){
	      this.imageUrl = URL.createObjectURL(file.raw);
	},
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
//这里是自定义发送请求
    picUpload(f){
     let params = new FormData()
     //注意在这里一个坑f.file
     params.append("file",f.file);
     this.$axios({
       method:'post',
       //这里的id是我要改变用户的ID值
       url:'/setimg/'+this.userForm.id,
       data:params,
       headers:{
         'content-type':'multipart/form-data'
       }
     }).then(res=>{
     //这里是接受修改完用户头像后的JSON数据
       this.$store.state.menu.currentUserInfo=res.data.data.backUser
       //这里返回的是头像的url
       this.imageUrl = res.data.data.backUser.avatar
     })
   },
   //触发请求
    submitUpload(){
   this.$refs.upload.submit();
 	}
}

在上面代码中有一个坑 f.file ,我看了许多博客,发现有些博客只有 f 没有 .file 导致出现401、505错误。

二、后端代码

1.建立数据库

这里头像avatar是保存的上传图片的部分url

2.实体类、Mapper

实体类:

采用mybatis plus

@Data
public class SysUser extends BaseEntity{
//这里的BaseEntity是id,statu,created,updated数据
    private static final Long serialVersionUID = 1L;

    @NotBlank(message = "用户名不能为空")
    private String username;

//    @TableField(exist = false)
    private String password;
    @NotBlank(message = "用户名称不能为空")
    private String name;
    //头像
    private String avatar;

    @NotBlank(message = "邮箱不能为空")
    @Email(message = "邮箱格式不正确")
    private String email;
    private String tel;
    private String address;
    @TableField("plevel")
    private Integer plevel;
    private LocalDateTime lastLogin;
}
@Mapper
@TableName("sys_user")
public interface SysUserMapper extends BaseMapper<SysUser> {
}

3.接受请求,回传数据

    @Value("${file.upload-path}")
    private String pictureurl;
    @PostMapping("/setimg/{id}")
    public Result setImg(@PathVariable("id") Long id, @RequestBody MultipartFile file){
        String fileName = file.getOriginalFilename();
        File saveFile = new File(pictureurl);
        //拼接url,采用随机数,保证每个图片的url不同
        UUID uuid = UUID.randomUUID();
        //重新拼接文件名,避免文件名重名
        int index = fileName.indexOf(".");
        String newFileName ="/avatar/"+fileName.replace(".","")+uuid+fileName.substring(index);
        //存入数据库,这里可以加if判断
        SysUser user = new SysUser();
        user.setId(id);
        user.setAvatar(newFileName);
        sysUserMapper.updateById(user);
        try {
            //将文件保存指定目录
            file.transferTo(new File(pictureurl + newFileName));
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println("保存成功");
        SysUser ret_user = sysUserMapper.selectById(user.getId());
        ret_user.setPassword("");
        return Result.succ(MapUtil.builder()
                .put("backUser",ret_user)
                .map());
    }

yml文件中图片的保存地址:

file:
  upload-path: D:\Study\MyAdmin\scr

三、显示图片

1.后端配置

实现前端Vue :scr 更具url显示头像图片,则必须设置WebMVC中的静态资源配置

建立WebConfig类

@Configuration
public class WebConfig implements WebMvcConfigurer{
    private String filePath = "D:/Study/MyAdmin/scr/avatar/";
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/avatar/**").addResourceLocations("file:"+filePath);
        System.out.println("静态资源获取");
    }
}

这样就可是显示头像图片了

2.前端配置

注意跨域问题以及前面的全局地址变量

vue.config.js文件(若没有则在scr同级目录下创建):

module.exports = {
    devServer: {
        // 端口号
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        // 配置不同的后台API地址
        proxy: {
            '/api': {
            //后端端口号
                target: 'http://localhost:8082',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => {}
    }
}

main.js:

	axios.defaults.baseURL = '/api'

总结

到此这篇关于利用Springboot+vue实现图片上传至数据库并显示的文章就介绍到这了,更多相关Springboot vue图片上传至数据库并显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java必须学会的类的继承与多态

    Java必须学会的类的继承与多态

    这篇文章主要介绍了Java类的继承与多态的相关资料,帮助大家更好的理解和学习Java,感兴趣的朋友可以了解下
    2020-08-08
  • 通过一个map替换字符串中指定的字符变量方法

    通过一个map替换字符串中指定的字符变量方法

    下面小编就为大家带来一篇通过一个map替换字符串中指定的字符变量方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Java使用POI导出大数据量Excel的方法

    Java使用POI导出大数据量Excel的方法

    今天需要写一个导出的Excel的功能,但是发现当数据量到3万条时,列数在23列时,内存溢出,CPU使用100%,测试环境直接炸掉。小编给大家分享基于java使用POI导出大数据量Excel的方法,感兴趣的朋友一起看看吧
    2019-11-11
  • SpringBoot统一返回处理出现cannot be cast to java.lang.String异常解决

    SpringBoot统一返回处理出现cannot be cast to java.lang.String异常解决

    这篇文章主要给大家介绍了关于SpringBoot统一返回处理出现cannot be cast to java.lang.String异常解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • SpringBoot中的响应式web应用详解

    SpringBoot中的响应式web应用详解

    这篇文章主要介绍了SpringBoot中的响应式web应用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • java 中clone()的使用方法

    java 中clone()的使用方法

    这篇文章主要介绍了java 中clone()的使用方法的相关资料,希望通过本文能帮助大家能掌握clone()的克隆方法,需要的朋友可以参考下
    2017-09-09
  • java中static关键字用法详解

    java中static关键字用法详解

    这篇文章主要为大家详细介绍了java中static关键字的用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Java基于ArrayList实现群主发红包功能

    Java基于ArrayList实现群主发红包功能

    这篇文章主要介绍了Java基于ArrayList实现群主发红包功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • Java一维数组和二维数组元素默认初始化值的判断方式

    Java一维数组和二维数组元素默认初始化值的判断方式

    这篇文章主要介绍了Java一维数组和二维数组元素默认初始化值的判断方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • springboot项目中没有识别到yml文件解决办法

    springboot项目中没有识别到yml文件解决办法

    这篇文章主要给大家介绍了springboot项目中没有识别到yml文件解决办法,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01

最新评论