SpringBoot+element-ui进行文件上传

最新推荐文章于 2024-08-12 10:43:21 发布

熊小哥~

最新推荐文章于 2024-08-12 10:43:21 发布

阅读量1.1w

点赞数

分类专栏： JAVA 文章标签： springboot文件上传

本文链接：https://blog.csdn.net/weixin_38168947/article/details/87995729

版权

JAVA 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

当进行系统开发时，往往涉及到文件的上传或下载，基本原理都是获取文件的输入流，然后在另一个新的文件进行写出。

1.准备

目录结构：
在这里插入图片描述
file为上传文件存放的文件夹，在使用element时需要导入element-index.css、vue.js、element-index.js这三个文件。

2.文件上传

前端main.html代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/css/element-index.css}" rel="stylesheet"/>
</head>
<body>
<div id="test1">
    <!-- 文件上传 -->
    <el-upload
            class="upload-demo"
            action="./file/upload"
            multiple
            :limit="3"
            >
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

</div>
</body>

<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/element-index.js}"></script>
<script>
    new Vue({
        el: '#test1',
        data:function () {
            return {
            }
        }
    });
</script>
</html>

后台代码FileDealController :


@RequestMapping("/file")
@RestController
public class FileDealController {

    @RequestMapping(value = "upload")
    public String upload(MultipartFile file) throws SocketException, IOException {
        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 在file文件夹中创建名为fileName的文件
        OutputStreamWriter op = new OutputStreamWriter(new FileOutputStream("./file/" + fileName), "UTF-8");
        // 获取文件输入流
        InputStreamReader inputStreamReader = new InputStreamReader(file.getInputStream());
        char[] bytes = new char[12];
        // 如果这里的bytes不是数组，则每次只会读取一个字节，例如test会变成 t   e     s    t
        while (inputStreamReader.read(bytes) != -1){
            op.write(bytes);
        }
        // 关闭输出流
        op.close();
        // 关闭输入流
        inputStreamReader.close();
        return "上传成功";
    }
}