SpringBoot 整合文件上传 elment Ui 上传组件

本文章记录自己学习使用侵权必删！

前端代码

博主最近在学 elment Ui 所以前端使用 elmentUi 的 upload 组件实现

因为 elmentui 是基于 vue 的环境使用的所以我们得引用 vue 的 js 文件

引入 elmentUi 的 css 和 js

我们采用官网的这种 cdn 的方式

本地的引入的方式容易导致elementUI与 vue 版本不匹配

出现Vue warn]: Injection “elForm” not found报错解决方法

项目的目录结构：

搭建前端页面

页面效果

光光这些肯定不够我们还需要前后端交互的页面

创建的文件名称：index.html

文件位置： /resources/static/index.html



  
    
    测试文件上传

所使用的依赖

找到 pom.xml

因为只用到了接口我们导入 web 的依赖即可


        spring-boot-starter-parent
        org.springframework.boot
        2.5.0
    

    
        8
        8
        UTF-8
    
	
    
        
            org.springframework.boot
            spring-boot-starter-web

后端代码

controller

/**
 * @author : look-word
 * 2022-06-27 22:28
 **/
@RestController
public class FileController {

    /**
     *  设置/img/**的访问规则
     *  意思就是当我们访问 http://localhost:8899/img/redis.png的时候
     *  会去addResourceLocations这和目录下寻找
     */
    @Configuration
    public static class MyPicConfig implements WebMvcConfigurer {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/img/**")
                    .addResourceLocations("file:"+System.getProperty("user.dir") + "\\src\\main\\resources\\static\\img\\");
        }
    }

    /**
     * 接收上传文件的接口
     * @param urlFile 上传的文件
     * @param request 请求
     * @return
     */
    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile urlFile,HttpServletRequest request) {
        //  url =》 http://localhost:8899/upload
        StringBuffer url = request.getRequestURL();
        // 意思是 取出ip地址加端口 http://localhost:8899
        String baseUrl = url.substring(0, url.length() - (url.length() - url.lastIndexOf("/")));
        // 文件名称
        String fileName = System.currentTimeMillis() + urlFile.getOriginalFilename();
        // 文件存储的路径
        String filePath = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\img\\";
        File file = new File(filePath);
        // 当文件夹不存在 创建文件夹
        if (!file.exists()) {
            file.mkdir();
        }
        File dest = new File(filePath + fileName);
        String storeUrlPath = "/img/" + fileName;

        try {
            // 写到文件夹中
            urlFile.transferTo(dest);
            System.out.println("上传成功");
        } catch (IOException e) {
            System.out.println("上传失败");
            throw new RuntimeException(e);
        }
        return baseUrl+storeUrlPath;
    }

}