【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;
      });
    }

头像显示代码：

效果如下：

②多文件上传

多文件其实是基于单文件的，就是在单文件的基础上，多次请求即可。我们也可以做个简单的案例测试。先在element-ui随便找一个文件上传的前端页面，如下图所示：

放在我们的RuoYi的项目中：

测试：

如上图所示，我们可以成功的拿到三张图片的地址，此时我们只需要，将其存入数据库，再从数据库中拿出来显示即可，大家下来试一试即可，我这里就不做测试了。

五、总结

   跟着青戈学习了这个文件上传与下载的的视频，自己真的学到了很多，这个文件上传下载的功能不仅适用于图片，也可以用在pdf、word等文件中，也希望这些内可以帮助屏幕前的小伙伴们，如果有所帮助，别忘了点赞、关注一波哦~