20201231——VUE2.0 Element-UI Excel 上传+后台读取 学习记录

VUE2.0 Element-UI Excel 上传+后台读取 学习记录

目前是 单个表格 纯文字数据 的导入
前端代码：

<div id="app">
 <el-upload
                    action="/api/xxxx/importExcel"
                    accept=" application/vnd.ms-excel,application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet"
                    multiple
                    :on-preview="handlePreview"
                    :before-upload="beforeUpload"
                    :limit="1"
                    :file-list="fileList"
                    :auto-upload="true"
                     ref="fileUpload">
 <el-button size="small" type="primary">点击上传（选择文件）</el-button>
 <div slot="tip" class="el-upload__tip">只能上传Excel格式的文件，且不超过10M</div>
 </el-upload>
  <el-button size="small" type="success" @click="upload" style="margin-top: 15px">确认上传</el-button>
<div>
<script src="/vue/vue.js"></script>
<!--<script src="/vue/vue-v2.6.12.min.js"></script>-->
<script src="/vue/axios.min.js"></script>
<script src="/elementui/elementui.js"></script>
<script >
var main = new Vue({
    el: '#app',
    data: {
        fileList:[],
        file:''
    },
    methods: {
        handlePreview(file) {
            console.log(file)//点击文件预览file
        },
        beforeUpload(file) {
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'xls'
            const extension2 = testmsg === 'xlsx'
            const isOut = file.size / 1024 / 1024 < 10
            if(!extension && !extension2) {
                this.$message({
                    message: '上传文件只能是 xls、xlsx格式!',
                    type: 'warning'
                });
            }
            if(!isOut ) {
                this.$message({
                    message: '上传文件大小不能超过 10MB!',
                    type: 'warning'
                });
            }
            return extension || extension2 && isOut 
        }
    },
     upload() {
           this.$refs.fileUpload.submit()；
     },
});
</script>

首先是自动上传， :auto-upload 表示是否在选取文件后立即进行上传，不写 默认为true. 这里的accept就是上传文件类型限制，表示的是限制Excel文件，当然也可以在 :before-upload方法里做自定义，上传成功或失败可通过自定义 :on-success，:on-error 方法来显示相关提示。手动上传**:auto-upload** 就改为false，然后点击确认上传调用 this.$refs.fileUpload.submit()；fileUpload对应标签里的ref.

后台代码：

@PostMapping("/importExcel")
@ResponseBody
public void importExcel(HttpServletRequest request, @RequestParam(value = "file")MultipartFile upload) throws Exception  {
        System.out.println(request.getHeader("Content-Type"));
        ExcelReader reader = ExcelUtil.getReader(upload.getInputStream(), 0);
        List<List<Object>> read = reader.read();
        System.out.println(JSON.toJSONString(read));
        System.out.println(upload.getOriginalFilename());
}
控制台打印：
multipart/form-data; boundary=----WebKitFormBoundaryuoLreC4OG1JdXBBB
[["测试报表","测试报表","测试报表","测试报表","测试报表","测试报表"],
["序号","描述","状态","创建时间","结束时间","名称"],
[78,"报警测试",2,1605511430,"","流程3"],
[77,"报警测试",2,1605506670,"","流程3"],
[76,"报警测试",2,1605506656,"","流程5"],
[75,"报警测试",2,1605504190,"","流程6"] ]
测试列表.xlsx


后台读取用的是Hutool工具，maven
<dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
</dependency>

@RequestParam(value = “file”)一定要写，之前一直不知道这个参数名，一直空指针。

以上便是这次学习的简单记录，java开发新人，欢迎交流.