springMVC上传文件

睆小白

于 2024-08-15 17:36:47 发布

阅读量437

点赞数 5

文章标签： java tomcat spring mvc

本文链接：https://blog.csdn.net/blackpudding_/article/details/141224976

版权

1. 添加依赖

<!--  用于处理文件上传 commons-fileupload 依赖于 commons-io 来处理文件和流操作
    主要功能包括：
    处理文件上传请求：解析 multipart/form-data 请求，提取文件和表单字段。
    文件存储：将上传的文件存储在磁盘或内存中。
    文件信息获取：获取上传文件的名称、大小、类型等信息。
-->
      <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.4</version>
      </dependency>
<!--  用于简化 IO 操作
    主要功能包括：
    文件操作：复制、移动、删除文件和目录。
    流操作：读取和写入流，简化流的操作。
    文件过滤：根据文件名、扩展名等过滤文件。
-->
      <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.6</version>
      </dependency>
    </dependencies>

2. 配置类

因为我的uploadFile.html文件放在WEB-INF/目录下，所以配置InternalResourceViewResolver，对请求进行解析。

@Configuration
@EnableWebMvc // 开启Spring MVC的注解驱动
@ComponentScan(basePackages = "com.huan.web") // 扫描Controller包
public class WebConfig implements WebMvcConfigurer {
    /**
     * 访问 webapp下的静态资源
     * 配置默认的servlet处理器
     * @param configurer
     */
    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

    /**
     * 访问web-inf目录下的静态资源
     * 视图解析器 配置路径匹配规则
     * @return
     */
    @Bean
    public InternalResourceViewResolver internalResourceViewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/views/");
        resolver.setSuffix(".html");
        return resolver;
    }


    /**
     * 添加拦截器
     * @param registry
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //将一个新的 MyInterceptor 实例添加到拦截器注册表中, 并指定拦截器的拦截路径为 "/**"
        //"/**" 表示拦截所有路径。** 是一个通配符，表示任意数量的字符和子路径。
        registry.addInterceptor(new MyInterceptor()).addPathPatterns("/**");
    }

    //配置文件上传解析器
    @Bean
    public MultipartResolver multipartResolver() {
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
        multipartResolver.setDefaultEncoding("UTF-8");
        multipartResolver.setMaxUploadSize(1024 * 1024 * 30);//设置上传文件大小为30M
        multipartResolver.setMaxUploadSizePerFile(1024 * 1024 * 10);//设置单个上传文件大小为10M
        return multipartResolver;
    }
}

3. 前端界面（同步）


    <h1>文件上传(同步)</h1>
    <form action="upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="上传">
    </form>

4. 前端界面（异步：vue+axios）


    <h1>文件上传(异步)</h1>
    <div id="app">
        <form>
            <input type="file" @change="handle">
            <input type="button" @click="uploadFile" value="上传">
        </form>
    </div>

    <script src="static/js/vue.js"></script>
    <script src="static/js/jquery-1.9.1.js"></script>
    <script src="static/js/axios.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data: {
                file: ''
            },
            methods: {
                handle:function (e) {
                    //设置file
                    this.file = e.target.files[0];
                },
                uploadFile:function () {
                    //设置表单对象
                    let formData = new FormData();
                    formData.append('file', this.file);
                    axios.post('upload', formData, {
                        headers: {
                            'Content-Type':'multipart/form-data' //设置请求头,配置表单数据类型
                        }
                    }).then(response =>{
                        alert(response.data);
                    }).catch(error => {
                        console.log(error);
                    });
                }
            }
        });
    </script>

5. 控制类

@Controller
public class UploadFileController {
    @ResponseBody
    @PostMapping("/upload")
    public void upload(
            @RequestParam("file") //作用是获取前端表单中name为file的文件
            MultipartFile file){
        if (!file.isEmpty()){
            try{
                //获取文件名
                String fileName = file.getOriginalFilename();
                //设置文件保存路径
                String filePath = "path/to/save/"+fileName;
                System.out.println(filePath);
                //保存文件
                file.transferTo(new File(filePath));
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }
    @RequestMapping("/uploadFile")
    public String uploadFile() {
        return "uploadFile";
    }
}