RuoYi-Vue表单打通表单文件上传（本地版）

最新推荐文章于 2025-04-27 14:23:43 发布

Le敲代码了吗

最新推荐文章于 2025-04-27 14:23:43 发布

阅读量1.4k

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_52808530/article/details/137866982

本文介绍了如何使用RuoYi框架中的Element-UI组件实现前端文件上传功能，包括前端上传组件的编写、后端接口的处理以及文件存储路径的管理。还涉及了如何在数据库中处理文件路径和进行静态资源映射的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习RuoYi，主要是前端部分，在此记录和分享如何实现表单中文件上传功能。

在表单未提交时就调用文件上传接口并返回文件存储路径

第一步编写前端上传组件，这里使用的是element-ui

组件代码如下

file-list：fileList通过handleChange函数触发来获取值，函数的形参有两个，参考官方文档，其中file为单个文件，fileList为文件集合；

:on-success="handleAvatarSuccess"为文件调用成功后的回调方法，负责将接口返回的文件存储位置绑定到表单元素。

:action="field101Action"为文件上传接口路径需掉此接口上传图片

:before-upload="field101BeforeUpload">在附件提交前调用，主要用来限制文件类型和文件大小

  <el-form-item label="上传附件" prop="field101" >
          <el-upload ref="field101" :file-list="field101fileList" :action="field101Action"
            :on-success="handleAvatarSuccess" 
            :before-upload="field101BeforeUpload">
            <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
          </el-upload>
        </el-form-item>

前端部分代码搞定后开始编写后端接口代码如下

    //文件上传接口
    @PostMapping("/upload")
    public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Please select a file to upload.");
        }
        try {
            // 生成一个唯一的文件名，防止文件名冲突
            String fileName = UUID.randomUUID().toString() + "_" + file.getOriginalFilename();
            // 设置文件存储路径，确保该目录存在
            String filePath = Constants.RESOURCE_UPload + fileName;

            // 将文件保存到服务器本地
            File dest = new File(filePath);
            file.transferTo(dest);
            // 返回上传成功的响应，包含上传后的文件名或文件路径等信息
            return ResponseEntity.ok().body("http://localhost:8080"+ "/profile/" + fileName);
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file.");
        }
    }

在此数据库并不存储真实的文件路径统一替换为RequestURL+profile+filename

类似于：http://localhost:8080/profile/13af668c-a22c-4057-a107-22e920b2cac8_视频1.png

之后要做的就是去控制器中做静态资源映射，将‘profile’路径的请求统一映射到本地真实文件路径。至此使用RuoYi-Vue上传文件全过程结束。后续会更新文件如何上传OSS云服务器的过程。

        registry.addResourceHandler("/profile/**").addResourceLocations("file:" + Constants.RESOURCE_UPload);