vue 前端代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<el-upload style="width: 100%" ref="importFileUploader" // 后台地址 :action="importFileUrl" // 头信息，可以放access token等信息 :headers="uploadHeaders" // 允许选择的文件类型 accept=".xls,.xlsx" // 是否支持批量上传 :multiple="false" // 上传文件前的方法 :before-upload="beforeUpload" // 上传成功的方法 :on-success="handleUploadSuccess" // 传到后台的参数 :data="upLoadData" // 是否自动上传 :auto-upload="false" // 和@requestParam对应 name="file" :limit="1" > <el-button slot="trigger" size="mini" type="primary" >选取文件</el-button> <el-button size="mini" type="success" @click="submitUpload" >导入</el-button> </el-upload> data() { return { upLoadData: { departmentId:'111111111112', }, importFileUrl: `${process.env.BASE_URL}/user/import`, uploadHeaders: { Authorization: 'Bearer ' + localStorage.getItem('Access-Token') }, } } // 上传前对文件的大小的判断 beforeUpload(file) { const extension = file.name.split('.')[1] === 'xls' const extension2 = file.name.split('.')[1] === 'xlsx' const isLt50M = file.size / 1024 / 1024 < 50 if (!extension && !extension2) { this.$message.error('导入文件只支持xls和xlsx文件') this.$refs.importFileUploader.clearFiles() } if (!isLt50M) { this.$message.error('导入文件小于50M') this.$refs.importFileUploader.clearFiles() } if ((extension || extension2) && isLt50M) { return this.importfxx(file).then(function (result) { if (!result) { return false; } else { return true; } }); } }, handleUploadSuccess: function(response, file, fileList) { if (response.code === '0-0-0-0-0-0') { this.$message({ message: '导入成功', type: 'info' }) // ... } else { this.$message({ message: response.message, type: 'error' }) } }, submitUpload() { this.$confirm('确定要导入吗？', '提示', { type: 'warning' }).then(() => { if (this.$refs.importFileUploader.uploadFiles.length === 0) { this.$message.info('没有选择文件') return false } if (this.$refs.importFileUploader.uploadFiles.length > 1) { this.$message.info('只能上传1个文件') this.$refs.importFileUploader.clearFiles() return false } // 这边是真正触发上传的地方 this.$refs.importFileUploader.submit() }).catch(() => { this.$message({ type: 'info', message: '已终止导入' }); return false; }) }, |
springboot 后端代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@PostMapping(value = "/import") public RestResponse import(@RequestParam("file") MultipartFile[] multipartFiles, @RequestParam Long departmentId) throws Exception { MultipartFile multipartFile = multipartFiles[0]; List<UserDTO> userDTOS = userService.importData(multipartFile, departmentId); List<Long> data = Lists.newArrayList(); try{ CompletableFuture[] futures = userDTOS.stream() .map(userDTO -> CompletableFuture.supplyAsync(() -> userService.add(userDTO)) .whenComplete((j, e) ->data.add(j))) .toArray(CompletableFuture[]::new); CompletableFuture.allOf(futures).join(); return RestResponse.success(data); } catch (Exception e){ return RestResponse.failure(USER_INSERT_FAIL.getCode(), USER_INSERT_FAIL.getMsg(), ""); } } |
0