上传详解

但是这里介绍一下头像头像上传。

<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
  <el-button size="small">
    选择
    <i class="el-icon-upload el-icon--right"></i>
  </el-button>
</el-upload>

1
2
3
4
5
6

<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
  <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col>

1
2
3

// 上传预处理
beforeUpload(file) {
  if (file.type.indexOf("image/") == -1) {
    this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
  } else {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      this.options.img = reader.result;
    };
  }
},
// 上传图片
uploadImg() {
  this.$refs.cropper.getCropBlob(data => {
    let formData = new FormData();
    formData.append("avatarfile", data);
    uploadAvatar(formData).then(response => {
      this.open = false;
      this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
      store.commit('SET_AVATAR', this.options.img);
      this.$modal.msgSuccess("修改成功");
      this.visible = false;
    });
  });
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 后端

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysProfileController.java

/**
 * 头像上传
 */
@Log(title = "用户头像", businessType = BusinessType.UPDATE)
@PostMapping("/avatar")
public AjaxResult avatar(@RequestParam("avatarfile") MultipartFile file) throws Exception
{
    if (!file.isEmpty())
    {
        LoginUser loginUser = getLoginUser();
        String avatar = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file, MimeTypeUtils.IMAGE_EXTENSION);
        if (userService.updateUserAvatar(loginUser.getUsername(), avatar))
        {
            AjaxResult ajax = AjaxResult.success();
            ajax.put("imgUrl", avatar);
            // 更新缓存用户头像
            loginUser.getUser().setAvatar(avatar);
            tokenService.setLoginUser(loginUser);
            return ajax;
        }
    }
    return error("上传图片异常，请联系管理员");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ruoyi-framework/src/main/java/com/ruoyi/framework/config/ResourcesConfig.java

Url资源映射

/** 本地文件上传路径 */
registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**")
        .addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");

1
2
3

上次更新: 2025/04/03, 11:07:08

← 日志配置详解下载详解→