前端(angular)
html层
<p-dialog header="信息导入" [(visible)]="showImport" [modal]="true" [contentStyle]="{'height':'840px'}" [responsive]="true" [width]="800" [minY]="70" [baseZIndex]="10000"> <p-fileUpload name="file[]" url="{ { importUrl}}" chooseLabel="选择" uploadLabel="上传" cancelLabel="取消" (onUpload)="onUpload($event)" (onBeforeUpload)="onBeforeUpload($event)" maxFileSize="10000000"> </p-fileUpload> <p-footer> <button type="button" pButton icon="fa fa-times" (click)="showImport=false" label="关闭" class="ui-button-secondary"></button> </p-footer> </p-dialog> <p-dialog header="正在上传..." [(visible)]="isDisplay" [modal]="true" [contentStyle]="{'height':'200px'}" [responsive]="true" [width]="600" [minY]="70" [baseZIndex]="10000"> <p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar> </p-dialog>
TS层
value: number = 0;
showImport:boolean=false;
isDisplay:boolean = false;
importUrl:string = this.config.getContextPath() + '/importData/importExcel';
点击导入按钮触发点击事件时会将 this.showImport = true; 来显示html页面的导入页面
// 上传文件回调 onUpload(event) { var r = event.originalEvent.body; if ('0' === r.code) { this.value = 100; this.showImport = false; this.lastQryCriteria = new ImportDataQueryCriteria(); this.lastQryCriteria.count = true; this.paginator.changePage(0); this.messageService.add({severity: 'success', summary: '提示', detail: '导入成功'}); this.onQuery();//导入之后刷新页面的方法 }else { this.value = 0; this.messageService.add({severity: 'info', summary: '提示', detail: r.message}); } this.isDisplay = false; } // 上传后 onBeforeUpload(event) { this.isDisplay = true; }
后端(springboot)
注意配置文件要加上接收文件大小
servlet:
multipart:
enabled: true #是否启用http上传处理
max-request-size: 100MB #最大请求文件的大小
max-file-size: 20MB #设置单个文件最大长度
file-size-threshold: 20MB #当文件达到多少时进行磁盘写入
Controller层
/**
* 导入数据
* @param request
* @return
*/
@RequestMapping(value = "/importExcel")
public RestResult<Object> importExcel(HttpServletRequest request) {
RestResult<Object> result = new RestResult<Object>();
result.setCode(RestResult.FAIL);
try {