在使用若依框架上传文件的时候遇到一个问题:在富文本框中上传一个文件传到哪里了,又怎么回显的,这些问题扯出来好多东西哦,且随我一步步看。
🤞主要说的是后端的代码实现,前端的在components组件中的Editor中自己看就行
🤞
先把后端代码贴出来,代码中还调用了各种方法就不粘出来了
@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
String filePath = RuoYiConfig.getUploadPath();
因为在配置文件application.yml我们可以找到一个这段代码:
文件路径 示例( Windows配置D:/ruoyi/uploadPath,Linux配置 /home/ruoyi/uploadPath)
profile: D:/ruoyi/uploadPath 就是上传文件的根路径。
在富文本框中文件上传之后,需要进行回显,上传后拿到了地址profile/upload/2024/01/01/12345.jpg,这个时候去访问后端localhost/dev-api/profile/upload/2024/01/01/12345.jpg
访问地址的过程中经历了两步处理
第一步:前端地址映射
localhost/dev-api/
变成http://localhost:8080
第二步: 访问后端 http://localhost:8080/profile/upload/2024/01/01/12345.jpg 会发现没有/profile 这个接口,那这个接口在哪?访问后端最先走过的就是拦截器,查看各种拦截器,最后在这个地方找到了ResourcesConfig配置类中。
这个方法会把/profile开头的路径给替换掉 RuoYiConfig.getProfile() 会获取到 最初的文件根路径D:/ruoyi/uploadPath
会自动转向到 RuoYiConfig.getProfile() 目录下寻找对应的资源文件,也就找到了请求文件最后返回file:D:/ruoyi/uploadPath/upload/123456.jpg文件流。
和文件回显同理。
大功告成,撒花致谢🎆🎇🌟,关注我不迷路,带你起飞带你富。