开发者社区> jclian91> 正文

Spring Boot入门（8）文件上传和数据预览

2018-04-24 1942

简介： 介绍   本次分享将具体介绍如何在Spring Boot中实现文件上传和数据预览。   我们将实现CSV文件的数据预览和部分图片格式的查看。
+关注继续查看

介绍

  本次分享将具体介绍如何在Spring Boot中实现文件上传和数据预览。
  我们将实现CSV文件的数据预览和部分图片格式的查看。主要的思路如下：

  • 利用Spring Boot的MultipartFile实现文件的上传；
  • 利用Spring MVC实现整个文件上传流程的控制；
  • 利用javacsv API实现CSV文件的读取；
  • 利用JavaScript实现CSV文件的数据预览

  话不多说，我们直接上项目！

项目介绍

  整个项目的结构如下：


整个项目的结构

  主要是两部分的内容，一部分是Controller(控制器)，一部分是view(视图)文件。UploadController.java是控制器，其代码如下：

package com.hello.upload.Controller;

import java.util.*;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
public class UploadController{

    private String filename;
    //Save the uploaded file to this folder
    private static String UPLOADED_FOLDER = "E://upload/src/main/resources/static/images/";

    /*
    **文件上传页面
     */

    @GetMapping("/upload")
    public String upload(){
        return "upload";
    }

    @PostMapping("/upload")
    public String singleFileUpload(@RequestParam("file") MultipartFile file,
                                   RedirectAttributes redirectAttributes) {

        if (file.isEmpty()) {
            redirectAttributes.addFlashAttribute("message", "文件为空! 请选择非空文件上传！");
            return "redirect:/uploadStatus";
        }

        try {
            // 获取文件并保存到指定文件夹中
            byte[] bytes = file.getBytes();
            filename = file.getOriginalFilename();
            Path path = Paths.get(UPLOADED_FOLDER + filename);
            Files.write(path, bytes);

            redirectAttributes.addFlashAttribute("message", "您已成功上传 '" + filename + "', 该文件大小约为 " +bytes.length/1024+" KB.");

        }
        catch (IOException e) {
            e.printStackTrace();
        }

        return "redirect:/uploadStatus";
    }

    /*
    ** 文件上传信息处理页面
     */
    @GetMapping("/uploadStatus")
    public String uploadStatus(){
        return "uploadStatus";
    }

    /*
    ** 数据预览页面： 支持CSV文件和部分图片格式的预览
     */

    @GetMapping("/review")
    public String review(Map<String, Object> map) {

        map.put("filename", filename);
        String filetype = filename.split("\\.")[1];
        map.put("filetype",filetype);
        System.out.println(filename);

        if(filetype.equals("csv")) {
            readCSV read_csv = new readCSV(UPLOADED_FOLDER + filename);
            List<String> result = read_csv.read();
            map.put("result", result);
        }

        return "review";
    }

}

  文件上传的错误处理包含在代码GlobalExceptionHandler.java中，其代码如下：

package com.hello.upload.Controller;

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@ControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(MultipartException.class)
    public String handleError1(MultipartException e, RedirectAttributes redirectAttributes) {

        redirectAttributes.addFlashAttribute("message", e.getCause().getMessage());
        return "redirect:/uploadStatus";

    }

}

  接着readCSV.java主要实现CSV文件内容的读取，其代码如下：

package com.hello.upload.Controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import com.csvreader.CsvReader;

/*
** readCSV类：实现CSV文件内容的读取
 */
public class readCSV {

    // 参数：文件路径
    private String file_path;

    // 构造函数
    readCSV(){}

    readCSV(String file_path){
        this.file_path = file_path;
    }

    // getter and setter
    public String getFile_path() {
        return file_path;
    }

    public void setFile_path(String file_path) {
        this.file_path = file_path;
    }

    // read()函数实现具体的读取CSV文件内容的方法
    public List<String> read() {

        List<String> result = new ArrayList<>();

        try {
            // 创建CSV读对象
            CsvReader csvReader = new CsvReader(file_path);
            while (csvReader.readRecord()){
                // 读取每一行数据，以逗号分开
                // System.out.println(csvReader.getRawRecord());
                result.add(csvReader.getRawRecord());
            }
            csvReader.close();
            return result;

        } catch (IOException e) {
            e.printStackTrace();
            return result;
        }
    }

}

  接着是视图部分，文件都位于templates文件夹下。upload.html文件主要是文件上传的页面，其代码如下：

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Upload files by Spring Boot</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<center>
    <br><br><br>
    <div class="panel panel-primary" style="width:600px">
        <div class="panel-heading">
            <h3 class="panel-title">文件上传</h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" role="form" method="POST" action="/upload" enctype="multipart/form-data">

                <div class="form-group" style="width:600px">
                    <label for="upload" class="col-sm-2 control-label">选择文件</label>
                    <div class="col-sm-10">
                        <input type="file" id="upload" name="file" />
                    </div>
                </div>


                <div class="form-group">
                    <div>
                        <button type="submit" class="btn btn-success" id="btn_upload">提交</button>
                        <input type="reset" class="btn btn-danger" value="重置" />

                    </div>
                </div>

            </form>
        </div>
    </div>

</center>

</body>

</html>

  uploadStatus.html文件主要用来展示文件上传的信息，包括上传成功和失败的信息，其代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<center>
    <br><br>
    <h2>文件上传状态</h2>

    <br><br>
    <div class="panel panel-success" style="width:1000px">

        <div class="panel-heading">
            <h3 class="panel-title">文件上传</h3>
        </div>

        <div class="panel-body">

            <div th:if="${message}">
                <h3 th:text="${message}"/>
            </div>

        </div>

    </div>

    <a href="/upload"><button class="btn btn-primary">返回文件上传</button></a>
    <a href="/review"><button class="btn btn-warning" id="review">数据预览</button></a>
    </center>

</body>

</html>

  接着是数据预览部分的HTML，主要实现CSV文件的预览和部分图片格式的查看，其代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>文件预览</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/table.css" rel="stylesheet">

    <script th:inline="javascript">
    var filetype = [[${filetype}]];
    var filename = [[${filename}]];

    function show(){
        if(filetype == "csv"){
            showTable();
        }
        else if((filetype=="jpg") || (filetype=="png") || (filetype=="gif") || (filetype=="bmp")){
            document.getElementById("content").innerHTML = filename;
            document.getElementById("image").src = "/images/"+filename ;
        }
        else{
            document.getElementById("content").innerHTML = "文件预览只支持csv文件以及部分格式的图片文件！"
        }
    }

    function showTable(){

    document.getElementById("content").innerHTML = filename;
    var thread_content = document.getElementById("index").innerHTML+"";
    if (thread_content == ""){
        var result = /*[[${result}]]*/ null ;
        var col_count = result[0].split(",").length;
        if(result.length > 51){
            var record_count = 51;
        }
        else{
            var record_count = result.length;
        }
        // 展示表格各个变量的名称
        var headers = result[0].split(",");
        row=document.createElement("tr"); //创建行
        for(var i=0; i< col_count; i++){
            th1=document.createElement("th"); //创建单元格
            th1.appendChild(document.createTextNode(headers[i])); //为单元格添加内容
            row.appendChild(th1); //将单元格添加到行内
        }
        document.getElementById("index").append(row); //将行添加到<thread>中
        for(var i=1; i < record_count; i++){
            row=document.createElement("tr"); //创建行
            for(var j=0; j< col_count; j++){
                td1=document.createElement("td"); //创建单元格
                td1.appendChild(document.createTextNode(result[i].split(",")[j])); //为单元格添加内容
                row.appendChild(td1); //将单元格添加到行内
            }
            document.getElementById("body").append(row); //将行添加到<thread>中
        }
        }

    }
</script>
</head>

<body>

<br><br>
<center>

    <button class="btn btn-danger" onclick="show()">文件预览</button>
    <a href="/upload"><button class="btn btn-warning" id="review">返回主界面</button></a>
    <br><br>

    <p id="content"></p>

    <div style="width:800px">
        <table class="table table-striped table-condensed table-responsive">
            <thead id="index"></thead>
            <tbody id="body"></tbody>
        </table>
    </div>

    <img id="image" src="" />

</center>

</body>

</html>

  最后将以下我们的配置文件，application.properties代码如下：

server.port=8100

spring.servlet.multipart.max-file-size=5MB
spring.servlet.multipart.max-request-size=5MB
spring.http.multipart.enabled=false

其设置网络端口为8100，每次上传的文件大小不超过5MB.项目构建文件build.gradle的代码如下：

buildscript {
    ext {
        springBootVersion = '2.0.1.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

group = 'com.hello'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
    mavenCentral()
}


dependencies {
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    compile group: 'net.sourceforge.javacsv', name: 'javacsv', version: '2.0'
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

运行及测试

  好不容易写完了项目，不测试一把，对不起观众啊。
  启动Spring Boot项目，在浏览器中输入：http://localhost:8100/upload,页面如下：


上传文件页面

  选择本地的mpg.csv文件上传，它将会上传至E://upload/src/main/resources/static/images/ 文件夹中，上传成功后的页面如下图：


文件上传成功

  点击数据预览按钮，跳转到review.html页面，再点击该页面的数据预览按钮，显示的页面如下图：


CSV文件预览

  当然也支持部分图片格式的预览，例如：movie.jpg，如下图：


图片预览

  当上传文件大于5MB时，显示的信息如下：


错误信息展示

  本次分享到此结束，该项目的Github地址为： https://github.com/percent4/Upload-File-Using-Spring-Boot 。 接下来还会继续更新Spring Boot方面的内容，欢迎大家交流~~

注意：本人现已开通两个微信公众号： 用Python做数学（微信号为：python_math）以及轻松学会Python爬虫（微信号为：easy_web_scrape）， 欢迎大家关注哦~~

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

Web App开发 JavaScript 前端开发 Java Spring
读写外部数据文本文件 odbc spring数据 读写数据文本文件 文件读写数据 外部数据文本文件
开发者社区 > 开发与运维 > 文章
作者高分内容
更多
加入云栖社区 844 TensorFlow.js入门（一）一维向量的学习 1545 Spring Boot入门（12）实现页面访问量统计功能 2858 Spring Boot入门（11）实现文件下载功能 1623 Java爬虫之下载全世界国家的国旗图片 2434
相关文章
陶然同学
Java项目：CRM客户关系管理系统(Spring+SpringMVC+MyBatis + maven)（二）
Java项目：CRM客户关系管理系统(Spring+SpringMVC+MyBatis + maven)（二）
9 0
mogqp3unktbnq
Java JVM知识汇总
1、JVM 是什么？ Java虚拟机（Java virtual machine，JVM）是 Java 程序运行基础，Java虚拟机有自己完善的硬件架构，如处理器、堆栈等，还具有相应的指令系统。 Java虚拟机本质上就是一个程序，当它在命令行上启动的时候，就开始执行保存在某字节码文件中的指令。Java语言的可移植性正是建立在Java虚拟机的基础上。任何平台只要装有针对于该平台的Java虚拟机，字节码文件（.class）就可以在该平台上运行。这就是“一次编译，多次运行”。
5 0
遂宁彭于晏
新手小白成功部署web项目在阿里云服务器
新手小白成功部署web项目在阿里云服务器，感谢阿里云的免费云服务器，能让我独立搭建自己的服务器，搭载自己的web项目
15 0
mogqp3unktbnq
❤️Android 从源码解读 Apk 的安装过程 ❤️（中）
PackageManagerService installStage() mHandler() HandlerParams.startCopy() InstallParams FileInstallArgs.copyApk() PackageManagerServiceUtils.copyPackage()
10 0
不吃西红柿丶
建议收藏丨sql行转列的一千种写法！！
建议收藏丨sql行转列的一千种写法！！
8 0
不吃西红柿丶
万字长文丨7个经典问题，助你拿下Java面试（建议收藏）
万字长文丨7个经典问题，助你拿下Java面试（建议收藏）
8 0
不吃西红柿丶
Hive小文件问题：如何产生、造成影响、解放办法
Hive小文件问题：如何产生、造成影响、解放办法
6 0
致Great_VIP
深度学习模型实战-深度学习模型在各大公司实际生产环境的应用讲解文章
建这个仓库的是因为工作之后发现生产环境中应用的模型需要做到速度和效果的平衡，并不是越复杂越好。所以一味的追求新的模型效果不大（并不是不追，也要多看新东西）。学到模型最终是要用，而且要用好，于是就建了这么个仓库，积累一下深度学习模型在各个公司中的应用以及细节，这样在自己工作中可以做到借鉴。主要是罗列一些各大公司分享的文章，涉及到搜索/推荐/自然语言处理(NLP)，持续更新... 仓库地址：https://github.com/DA-southampton/Tech_Aarticle/edit/master/README.md
5 0
陶然同学
Java项目：CRM客户关系管理系统(Spring+SpringMVC+MyBatis + maven)（三）
Java项目：CRM客户关系管理系统(Spring+SpringMVC+MyBatis + maven)（三）
8 0
游客lbx4ee2n6jmpk
飞天加速计划·高校学生在家实践
阿里云服务器ECS初体验
6 0
+关注
jclian91
热爱算法，热爱技术，热爱生活，期待更好的自己与明天~
126
文章
0
问答
作者高分内容
更多
加入云栖社区 844 TensorFlow.js入门（一）一维向量的学习 1545 Spring Boot入门（12）实现页面访问量统计功能 2858 Spring Boot入门（11）实现文件下载功能 1623 Java爬虫之下载全世界国家的国旗图片 2434
文章排行榜
最热
最新
1 如何在云端重塑内容生产？来看这场虚拟人主持的发布会 34848
2 关于阿里云ECS的那点事 33333
3 ecs宝塔搭建wordpress个人博客 26292
4 【ECS最佳实践】ECS+RDS构建云服务器主动防御系统部署开源蜜罐系统Hfish及ECS周边功能测试 25442
5 1小时入门天猫精灵有屏音箱语音技能开发 23751
6 阿里云RemoteShuffleService新功能：AQE和流控 13572
7 Kafka生产者3种分区分配策略 12765
8 天猫精灵实现无唤醒词推送断网播报 10491
9 阿里云服务器ECS购买、部署Web站点流程详解 10336
10 国内唯一连续入选Gartner，Quick BI是如何做到的？ 8646
11 天猫精灵技能测评实践 8688
12 ECS评测---体验源相关问题处理 8535
13 ECS评测心得、使用笔记 8537
14 阿里云ECS测评之选购指南 8546
15 Windows ECS测评对实例进行安全加固 8456
16 天猫精灵开放平台-之小百科测评 8544
17 修行Android Studio技巧到出神入化，快速涨薪-【快捷键】和【演示】篇 7083
18 通知：2022.5.1云大使返佣新规上线，大使等级将由拉新用户数决定 6646
19 【机器学习】假设空间与版本空间 7332
20 手把手教你在阿里云ECS上搭建惊艳的博客 17008
1 除了GitHub，你还知道那些免费源代码托管网站？文末送福利 63
2 数据库五章其二第二讲 ——SQL 54
3 在Ubuntu18.04上搭建博客 92
4 关于技术能力的思考和总结 63
5 Java易错点4 53
6 Spring Boot 2.7.0 更新说明 68
7 阿里云首家通过《可信云·云成本优化工具能力要求》评估 86
8 Leetcode --- 数学运算问题2 67
9 ESS 标签鉴权使用场景实践 142
10 SpringBoot集成Mqtt 1135
11 2022 年值得关注的边缘 AI 主要趋势 125
12 【剑指Offer】1-10题 65
13 2022中青杯B题开放三孩背景下的生育政策研究分析思路 154
14 快速网络共享心法？ 136
15 排序：希尔排序（算法） 59
16 如何用Java实现位图转矢量图？ 64
17 Java 最常见的 208 道面试题(十二) 108
18 性能提升 57% ，SMC-R 透明加速 TCP 实战解析 | 龙蜥技术 60
19 做ToB软件质量保障的这两年 71
20 预约直播｜阿里云CDP 产品发布会 78
推荐文章
《云原生实战案例集》重磅发布！ “第益课”大学生技术公益实践计划免费报名中 大咖手把手带你玩转RDS MySQL，学习到实践免费体验 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB，加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版（下）
立即下载