SpringBoot+element-ui进行文件上传

短命女 2022-03-16 13:22 342阅读 0赞

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

## 1.准备 ##

目录结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE2ODk0Nw_size_16_color_FFFFFF_t_70]  
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 "上传成功";
        }
    }

## 3.测试 ##

准备一个测试文件，随便都可以，我这里随便弄了一个记事本:  
![在这里插入图片描述][20190228222656297.png]  
输入地址进行测试：  
![在这里插入图片描述][20190228222744216.png]  
在控制台中可以看到返回的结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE2ODk0Nw_size_16_color_FFFFFF_t_70 1]  
如果在file文件夹中看到上传文件，基本上已经上传成功了，以下为上传后的文件内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE2ODk0Nw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE2ODk0Nw_size_16_color_FFFFFF_t_70]: /images/20220316/3bc7f9f717244778bcdbcc97caef145c.png
[20190228222656297.png]: /images/20220316/e9c806ddd554440abd78622a5462900b.png
[20190228222744216.png]: /images/20220316/08ab8b42e152495ba3bf0ffd4e7518ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE2ODk0Nw_size_16_color_FFFFFF_t_70 1]: /images/20220316/a61c53a70db74814aeef73296da0f3bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODE2ODk0Nw_size_16_color_FFFFFF_t_70 2]: /images/20220316/3bedb7d94d33451287ebdf1daad0a16b.png