使用角度4上传文件

Posted 2021-04-26

我正在尝试使用angular 4上传excel文件，并通过节点在我的数据库中添加文件的数据。我已经编写了角度代码，但是当我点击我的上传按钮时没有任何反应。既没有调用路由也没有任何错误。请你看看我的代码并告诉我哪里出错了

我的上传服务：

constructor(public http: Http) {}

 uploadFile(formData) {
   const url  = 'http://localhost:3000/upload';
   console.log('here');
    return this.http.post(url, formData);
  }

我的打字稿文件：

import {Component, ElementRef, OnInit} from '@angular/core';
import {FileUploadService} from './file.upload.service';



@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  private elemRef: ElementRef;

  constructor(public fileUploadService: FileUploadService) {
   }

  ngOnInit() {
  }

  uploadFile() {
    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());
       }
    );

  }
}

我的HTML代码：

<form>
  <div class="form-group">
    <label for="file">single</label>
    <input id= "file"
       type="file"
       class="form-control"
       name="single"
        />
    <button (click)="uploadFile()">Upload</button>
  </div>
 </form>

我已将该服务包含在我的app.module提供程序和所有内容中

答案

你正在使用Angular，你为什么不利用它呢？

用这个

this.elemRef.nativeElement.querySelector('#file').files;

适得其反。相反，使用它

<!-- HTML -->
<input id= "file"
   type="file"
   class="form-control"
   name="single"
   #uploadInput
/>

// TypeScript
@ViewChild() uploadInput: ElementRef;
const files = (this.uploadInput.nativeElement as HTMLInputElement).files; // remove the 'as' clause if you want

现在，关于你的问题：你能尝试删除你的form标签吗？我猜这个按钮正在验证你的表格，但实际上，这是在湖里扔石头。你可以发布你的HTML和CSS的整个代码吗？也许你忘记了其他地方的东西，因为否则，我没有看到任何问题（假设你实际上选择了一个文件但没有取消，因为你的代码没有条件阻止取消）