文件上传在Postman中可以工作，但在Angular2中无法工作。

32 浏览
0 Comments

文件上传在Postman中可以工作，但在Angular2中无法工作。

我对Angular 2还不太熟悉，请理解一下。\n我在使用Angular 2将文件上传到node服务器时遇到了问题。在Postman中可以正常工作：\nPostman快照：\n[点击此处查看图片描述](https://i.stack.imgur.com/CU23M.png)\n然而，当我使用Angular2应用程序向服务器发送文件时，却没有任何反应：\nAngular HTML组件：\n

\nAngular TS组件：\n

import { Component, OnInit } from '@angular/core';
import { UploadService } from './upload.service';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  constructor(private uploadService: UploadService) { }
  ngOnInit() {
  }
  onUpload = (file: File) => {
    this.uploadService.uploadfile(file)
      .subscribe((res) => {
        console.log(res);
      },
      (err) => {
        console.log(err);
      });
  }
}

\n服务组件：\n

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class UploadService {
  constructor(private http: HttpClient) {
  }
  uploadfile(file: File): Observable {
    console.log(file);
    return this.http.post("http://localhost:3000/fileupload", file, { headers: { 'Content-Type': 'application/json' } });
  }
}

\n当然，我肯定是遗漏了一些东西。我请求大家提供一些解决方案。

0

2 答案

0 Comments

问题的原因可能是关于Headers的设置。解决方法是在上传文件的请求中设置正确的Headers。

在Angular2中，可以通过HttpClient来发送请求。在上传文件的服务中，可以通过设置headers来指定请求的Content-Type为application/x-www-form-urlencoded。

具体代码如下：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class UploadService {
  constructor(private http: HttpClient) {
  }
  uploadfile(file: File): Observable {
    console.log(file);
    return this.http.post("http://localhost:3000/fileupload", file, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  }
}

通过以上代码设置正确的Headers，问题可以得到解决。

0
0 Comments

问题出现的原因是在Angular2中使用`FormData`上传文件时，未正确创建`FormData`对象，导致文件无法上传成功。

解决方法是按照正确的方式创建`FormData`对象，并将文件添加到表单中进行上传。具体代码如下：

fileDetails: any = {
  clientDoc: {}
};
uploadClientDoc(event) {
  this.fileDetails.clientDoc = event.target.files[0];
}
submit() {
  let formData: FormData = new FormData();
  formData.append('clientDoc', this.fileDetails.clientDoc);
  
  this.urService.uploadFiles(formData).subscribe(res => {
    // 处理上传成功后的逻辑
  });
}
uploadFiles(data) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '*',
    })
  };
  
  return this.http.post('', data, httpOptions);
}

在模板中，需要将文件上传的`input`元素修改为正确的方式：

以上是解决该问题的方法，该方法可以在Angular2中正确上传文件。

0