springbot+minio+vue头像上传

springbot+minio+vue头像上传

1、头像上传案例

1. 前台通过查询到的url显示图片

2. 上传头像时将文件通过form-data的方式传到服务端

3. 查询用户是否存在（稳妥起见判断一下查询到的用户信息是否为空）

4. 通过uuid的形式为将要上传的文件生成新的名字

5. 后台接到MultipartFile类型的文件后使用自行封装的工具类将MultipartFile—>File类型—>修改文件名为生成的rname—>返回MultipartFile

6. 判断minio桶是否存在如果存在不操作不存在生成桶

7. 将之前的旧头像进行删除（降低minio存储压力）

8. 将新文件上传minio

9. 将图片的新地址存入mysql数据库

PostMapping("/updateFile")
public Result updateFile(MultipartFile file, Principal principal) {
   String contentType = file.getContentType();
   SysUser sysUser = sysUserService.getByUsername(principal.getName());
   if(sysUser==null){
      return Result.fail("系统异常请重新登录");
   }
   String rname = UUID.randomUUID().toString().replaceAll("-", "");
   try {
      //判断桶是否存在
      boolean isExist = minioClient.bucketExists(BucketExistsArgs.builder().bucket(minioPro.getBucketName()).build());
      if(!isExist){
         //不存在创建桶
         minioClient.makeBucket(MakeBucketArgs.builder().bucket(minioPro.getBucketName()).build());
      }
      String[] httpToName=sysUser.getAvatar().split("/");
      //文件移除
      RemoveObjectArgs reobjectArgs = RemoveObjectArgs.builder().object(httpToName[httpToName.length-1])
            .bucket(minioPro.getBucketName()).build();
      minioClient.removeObject(reobjectArgs);
      file=FileUtil.MultipartFileRName(file,rname);
      //文件上传
      PutObjectArgs upobjectArgs = PutObjectArgs.builder().object(file.getOriginalFilename())
            .bucket(minioPro.getBucketName())
            .contentType(contentType)
            .stream(file.getInputStream(),file.getSize(),-1).build();

      minioClient.putObject(upobjectArgs);
   } catch (Exception e) {
      e.printStackTrace();
      return Result.fail("照片上传失败");
   }

   sysUser.setAvatar(minioPro.getEndpoint()+"/"+minioPro.getBucketName()+"/"+file.getOriginalFilename());

   sysUser.setUpdated(LocalDateTime.now());

   sysUserService.updateById(sysUser);
   return Result.succ("成功");
}

vue代码

样式使用的element-ui

本部分就提供重要js代码

 upLoad(file) {
            console.log("aaaaaaaaaaaaa",file)
            const formData = new FormData()//通过form数据格式来传
            formData.append("file", file.file) //传文件
            console.log("bbbbbbbbbbbbb",formData)
            this.$axios.post('/sys/user/updateFile', formData).then((res) => {
                console.log(res);
                console.log('上传成功')
                if (res.code === 200) {
                    this.$message(res.data.msg)

                } else {
                this.$message(res.data.msg)
                }
            })            
        },