【RuoYi】实现文件的上传与下载

一、前言

首先，最近在做一个管理系统，里面刚好需要用到echarts图和富文本编辑器，然后我自己去看了官网觉得有点不好懂，于是去B站看来很多视频，然后看到了up主【程序员青戈】的视频，看了他讲的echarts图和富文本编辑器部分的内容，觉得讲的很好，很推荐大家去观看他的视频。然后在富文本编辑器这部分内容中，需要用到，文件上传与下载的部分知识，所以这里做一个笔记，来记录关于这部得分的内容，echarts图和富文本编辑器部分的内容也会在后面的博客中介绍。希望对大家有所帮助啦~

二、准备工作

导入hutool的依赖

        <!--hutool工具类--><!-- https://mvnrepository.com/artifact/cn.hutool/hutool-all --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.25</version></dependency>

三、文件上传与下载代码

如下所示，是跟着青戈学的已经封装好的代码，大家可以直接拿来用。但是需要注意的是，我用的是RuoYi的框架，所以最后返回的是RuoYi封装好的AjaxResult结果集，而不是青戈自己写的Result结果集，就这里需要注意以下。

@RestController
@Api(tags = "文件上传与下载模块")
@RequestMapping("/file")
public class FileController extends BaseController {@Value("${ip:localhost}")String ip;//通过配置文件拿到ip@Value("${server.port}")String port;private static final String ROOT_PATH = System.getProperty("user.dir")+ File.separator+"files";//文件根目录@ApiOperation(value = "文件上传")@PostMapping("/upload")public AjaxResult Upload(@RequestPart("file") MultipartFile file) throws IOException {//MultipartFile file 输入的文件String originalFilename = file.getOriginalFilename();//originalFilename是获取源文件名String mainName = FileUtil.mainName(originalFilename);// mainName 是主文件名String extName = FileUtil.extName(originalFilename);//extName 是文件的标识 png、pdf等if(!FileUtil.exist(ROOT_PATH)){//通过hutool工具类中的FileUtil来判断我们的根目录是否存在，若不存在则在根目录下创建file文件夹FileUtil.mkdir(ROOT_PATH);}//判断file文件夹中传入的文件是否存在，若存在为了防止重名不被替换，则需要对文件重新命名if(FileUtil.exist(ROOT_PATH+File.separator+originalFilename)){originalFilename=System.currentTimeMillis()+"_"+mainName+"."+extName;}File saveFile = new File(ROOT_PATH + File.separator + originalFilename);//创建一个file文件对象，方便写入磁盘file.transferTo(saveFile);//存储文件到本地磁盘里面去String url ="http://"+ip+":"+port+"/file/download/"+originalFilename;//问价下载的路径return AjaxResult.success(url);//RuoYi自带的结果集}@ApiOperation(value = "文件下载")@GetMapping("/download/{fileName}")public void download(@PathVariable String fileName, HttpServletResponse response) throws IOException {
//        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName,"UTF-8"));//文件下载response.addHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(fileName,"UTF-8"));//文件预览String filePath = ROOT_PATH+File.separator+fileName;//拿到文件的路径if(!FileUtil.exist(filePath)){//文件不存在，就不用管，因为没有东西可写return;}byte[] bytes = FileUtil.readBytes(filePath);//使用FileUtil从filePath中去读取文件ServletOutputStream outputStream = response.getOutputStream();outputStream.write(bytes);//把文件的字节数写出去outputStream.flush();//刷新一下outputStream.close();//一定要关闭文件流}
}

接口测试

我们在测试接口时，可以直接使用RuoYi框架为我们提供的Swagger来测试接口，当然也可以用PostMan,看个人的习惯来定了。

文件上传成功返回码为200，而且在Idea中生成file文件夹

到此我们的文件上传与下载的接口就完成了，接下来我们来看看如何在前端使用我们的该功能。

四、实践

①单文件上传

如上图所示，我们现在要完成一个点击功能，从而实现用户头像的上传与显示，这个功能也是我们在做项目中很常见的功能。

思路：上传图片->保存数据库->再从数据库拿到图片路径

先完成文件的上传：

注意：我们使用的是RuoYi框架中的AjaxResult结果集，返回的数据是在response下的msg中

JS中代码

    handleTableFileUpload(row,file,fileList){console.log(row,file)row.stuAvatar=file.response.msg//注意我们使用的是RuoYi框架中的AjaxResult结果集，返回的数据是在response下的msg中//触发更新//使用RuoYi中封装好的updateStudent()函数，将当前对象更新updateStudent(row).then(response => {if(response.code=='200'){this.$message.success("上传成功")}else{this.$message.success("上传失败")}this.form = response.data;});}

头像显示代码：