先介绍一个demo ，前端框架使用的是VUE，组价用的是el-upload组件，它的相关介绍在官方文档中有介绍，点击即可跳转Upload 上传 ，那么话不多少，上代码。
前端代码如下
<template> <el-dialog class="dialog" v-model="dialogFormVisible" title="导入文件" width="30%" align-center> <el-form :model="form" > <el-form-item label="导入数据文件" :label-width="formLabelWidth"> <el-upload v-model:file-list="fileList" class="upload-demo" action="#" multiple :auto-upload="false" :on-change="handleChange" :on-remove="handleRemove" :limit="2" > <el-button type="primary">Click to upload</el-button> </el-upload> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogFormVisible = false">Cancel</el-button> <el-button type="primary" @click="confirm"> Confirm </el-button> </span> </template> </el-dialog> </template> <script> import {excelToolImport} from "@/utils/post"; export default { data () { return { dialogFormVisible:false, fileMap:{}, form:{ name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '', }, fileList:[] } }, components: {}, methods: { changeVisible(){ this.dialogFormVisible = !this.dialogFormVisible }, handleChange(file, fileList) { this.fileList = fileList }, handleRemove(file, fileList) { this.fileList = fileList }, async confirm(){ let self =this debugger let formData = new window.FormData(); for(let i=0;i<this.fileList.length;i++){ formData.append('file', this.fileList[i].raw); } console.log(formData.get('file')) excelToolImport(formData) self.dialogFormVisible = false }, }, watch: {}, created () {}, mounted () {} } </script> <style scoped> .dialog{ color: #124373; background: linear-gradient(0deg, rgba(101,186,246,0.2), rgba(0,0,0,0)); } .comAddBatch-row-file { font-size: 0.9vw; width: 325px; color: #fff; flex: 1; max-width: calc(100% - 80px); height: 22px; display: flex; align-items: center; border: 1px solid #1197f3; box-shadow: 0 0 7px 1px rgba(33, 152, 235, 0.3) inset; border-radius: 5px; } .file-name { flex: 1; padding-left: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .second-row{ display: flex; height: 22px; } .font{ height: 19px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #1b9cba; line-height: 16px; } .comAddBatch-line { width: 100%; height: 1px; opacity: 0.1; border-bottom: 1px solid #57b6fa; margin: vw(10) auto; } .comAddBatch-row { width: 100%; height: 52px; display: flex; align-items: center; padding: 0 1vw; font-size: 0.9vw; color: #1883d0; font-family: "Microsoft YaHei"; } .comAddBatch-row-title { margin-top: 10px; } .comAddBatch-file-blue { color: #1e71eb; } .comAddBatch-file-green { color: #00b163; } .comAddBatch-file-red { color: #f74f66; } .comAddBatch-file-num { margin: 0 0.5vw; font-family: Impact; font-size: 26px; } </style
对应的js文件如下
import axios from 'axios' // 测试 EXCEL数据导入ES export function excelToolImport (obj) { return axios.post( '/tool-station/testExcelTool',obj ) }
对应的后端接口
@RequestMapping(value = "/testExcelTool", method=RequestMethod.POST) public String excelImport(@RequestParam(value = "file") MultipartFile[] files) throws IOException { for (MultipartFile file : files) { InputStream in = file.getInputStream(); String originalFilename = file.getOriginalFilename(); Path path1 = Files.createFile(Paths.get("data/" + originalFilename)); File file1 = new File(String.valueOf(path1)); FileOutputStream os = new FileOutputStream(file1); byte[] buffer = new byte[1024]; int length; while ((length = in.read(buffer)) != -1) { os.write(buffer, 0, length); } os.flush(); in.close(); os.close(); }
