Home > Java > javaTutorial > How to use Springboot+vue to upload images to the database and display them

How to use Springboot+vue to upload images to the database and display them

WBOY
Release: 2023-05-12 09:52:05
forward
2589 people have browsed it

    1. Front-end settings

    The front-end is Vue Element-UI and uses the el-upload component (drawing from the official) to upload images:

    <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" alt="How to use Springboot+vue to upload images to the database and display them" >
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
    
    <el-button type="primary" @click="submitUpload">修改</el-button>
    Copy after login

    actionYou can set it casually here, because there is :http-request at the back to set the request yourself. Note that since you write the request yourself, you need :auto-upload="false" , and since the front-end and back-end connections need to solve cross-domain problems, a global variable is defined in $hostURL imageUrl:

    //在main.js中
    	Vue.prototype.$hostURL=&#39;http://localhost:8082&#39;
    Copy after login

    In methods:

    methods:{
    //这里是官方的方法不变
    	handleAvatarSuccess(res, file){
    	      this.imageUrl = URL.createObjectURL(file.raw);
    	},
        beforeAvatarUpload(file) {
          const isJPG = file.type === &#39;image/jpeg&#39;;
          const isLt2M = file.size / 1024 / 1024 < 2;
    
          if (!isJPG) {
            this.$message.error(&#39;上传头像图片只能是 JPG 格式!&#39;);
          }
          if (!isLt2M) {
            this.$message.error(&#39;上传头像图片大小不能超过 2MB!&#39;);
          }
          return isJPG && isLt2M;
        },
    //这里是自定义发送请求
        picUpload(f){
         let params = new FormData()
         //注意在这里一个坑f.file
         params.append("file",f.file);
         this.$axios({
           method:&#39;post&#39;,
           //这里的id是我要改变用户的ID值
           url:&#39;/setimg/&#39;+this.userForm.id,
           data:params,
           headers:{
             &#39;content-type&#39;:&#39;multipart/form-data&#39;
           }
         }).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();
     	}
    }
    Copy after login

    There is a pitfall in the above code f.file. I read many blogs and found that some blogs only have f but not .file, resulting in 401 and 505 errors.

    2. Back-end code

    1. Establish database

    How to use Springboot+vue to upload images to the database and display them

    Here the avatar is the saved partial url of the uploaded image

    2. Entity class, Mapper

    Entity class:

    Using 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;
    }
    Copy after login
    @Mapper
    @TableName("sys_user")
    public interface SysUserMapper extends BaseMapper<SysUser> {
    }
    Copy after login

    3. Accept the request and return the data

        @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());
        }
    Copy after login

    Save address of pictures in yml file:

    file:
      upload-path: D:\Study\MyAdmin\scr
    Copy after login

    3. Display pictures

    1. Backend configuration

    Implement front-end Vue :scr If you want to display the avatar image in the url, you must set the static resource configuration in WebMVC

    Create the WebConfig class

    @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("静态资源获取");
        }
    }
    Copy after login

    This way you can display the avatar image

    2. Front end Configuration

    Pay attention to cross-domain issues and the previous global address variable

    vue.config.js file (if not, create it in the same directory as scr):

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

    main .js:

    	axios.defaults.baseURL = &#39;/api&#39;
    Copy after login

    The above is the detailed content of How to use Springboot+vue to upload images to the database and display them. For more information, please follow other related articles on the PHP Chinese website!

    Related labels:
    source:yisu.com
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template