Angular 4 Excel文件上传无响应，请求排查代码问题

我帮你梳理了代码里的两个核心问题，这就是导致点击上传按钮没反应的原因：

问题1：ElementRef未正确注入 #

你在组件里声明了private elemRef: ElementRef;，但没有在构造函数中注入它，导致this.elemRef是undefined。当你尝试调用this.elemRef.nativeElement.querySelector('#file')时会直接抛出错误，这个错误发生在调用上传服务之前，所以服务里的console.log('here')根本不会执行，而且Angular可能会静默处理这个错误，让你看不到报错信息。

修复方法 #

修改组件的构造函数，注入ElementRef：

constructor(public fileUploadService: FileUploadService, private elemRef: ElementRef) { }

问题2：表单默认提交行为未阻止 #

你的按钮放在<form>标签内，默认点击会触发表单的默认提交行为，导致页面刷新。这会直接中断正在发起的HTTP请求，哪怕前面的代码没问题，你也看不到任何响应。

修复方法（二选一） #

• 方法一：修改按钮类型为button（推荐）
  直接给按钮加上type="button"，避免触发表单提交：

<button type="button" (click)="uploadFile()">Upload</button>

• 方法二：在点击事件中阻止默认行为
  修改组件的uploadFile方法，接收事件对象并阻止默认行为：

uploadFile(event: Event) {
  // 阻止表单默认提交
  event.preventDefault();
  
  const files = this.elemRef.nativeElement.querySelector('#file').files;
  const formData = new FormData();
  const file = files[0];
  formData.append('file', file);
  
  this.fileUploadService.uploadFile(formData).subscribe(
    (response) => { console.log(response.json()); },
    // 新增错误处理，方便排查问题
    (error) => { console.error('上传出错:', error); }
  );
}

对应的HTML也要传递事件对象：

<button (click)="uploadFile($event)">Upload</button>

可选优化：添加错误处理 #

在subscribe中加上错误回调，这样即使后续Node.js端有问题，你也能在浏览器控制台看到具体错误信息，方便进一步排查。

内容的提问来源于stack exchange，提问作者user8885733