ruoyi/若依自带的文件(头像)上传功能是如何实现的？

前置

我的ruoyi版本是：3.8.6 前后端分离版
官方网站：RuoYi-Vue

前端VUE

在VUE中我们之间使用image-upload标签显示一个上传按钮，但是image-upload是一个自定义的组件不是element-ui自带的；
组件的位置在 -> ruoyi-ui\src\components\ImageUpload

<image-upload v-model="form.xxx"/>

接下来我们关注的上图片上传到哪去了？看看源码：

uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址

也就是说图片会上传到上述地址，那么这个地址是什么呢？

查看 .env.development 文件后就可以看出，这是后台的一个接口。

后台springboot

在CommonController这个类中，我们可以找到这个接口:

@RestController
@RequestMapping("/common")
public class CommonController
{
	...
    @PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile file) throws Exception
    {
		try
        {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            ajax.put("newFileName", FileUtils.getName(fileName));
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
	}
	...
}

拼起来就是前端写的 /common/upload 了

文件的上传的真是路径是什么呢？

跟进RuoYiConfig类看看，可以看到如下方法：

    public static String getUploadPath()
    {
        return getProfile() + "/upload";
    }

其中 getProfile() 方法返回了一个字符串，就是该类中定义的profile属性：

    /** 上传路径 */
    private static String profile;

profile的值具体是什么？这个答案就在application.yml中：

ruoyi:
  profile: D:/ruoyi/uploadPath

在类RuoYiConfig上有一个注解可以自动把配置文件中的值注入到我们的类中：

@ConfigurationProperties(prefix = "ruoyi")
public class RuoYiConfig{...}

前缀+属性名拼起来就是ruoyi-profile，对应配置文件中的ruoyi:profile:

所以文件最后上传的路径就是：D:/ruoyi/uploadPath中，至于后续的细节可以看看uploadFile方法中的具体实现。