Angular 角度2+；上载文件拦截器问题

您好，我正在使用Angular to Net Core 2.1 api上传一个文件

在我的前端项目中，我为令牌身份验证配置了一个全局拦截器

身份验证在其他调用中非常有效，但当我尝试发布FormData并附加身份验证头时，服务器会发送一个“缺少内容类型边界”错误。当我没有附加任何标题时，它会正常工作

你能看出我做错了什么吗

这是我的拦截器：

@Injectable({ providedIn: 'root' })
export class AuthInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const userData: string = localStorage.getItem('userData');

        let request = req;

        if (userData != null) {
            const user = JSON.parse(userData);
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${user['_token']}`
                }
            });
        }

        return next.handle(request);
    }
}

export interface Contract {
  id: number;
  title: string;
  document?: File;
}

@Component({
  selector: 'app-contract',
  templateUrl: './contract.component.html'
})
export class ContractComponent implements OnInit {
  contractForm: FormGroup;

  constructor(
    private api: ContractService
  ) { }

ngOnInit() {
    this.contractForm = new FormGroup({
      id: new FormControl(0),
      title: new FormControl(null, [Validators.required]),
      document: new FormControl(null, [Validators.required])
    });
}


  onAddContract() {
    const formData = new FormData();
    formData.append('id', '0');
    formData.append('title', this.contractForm.get('title').value);
    formData.append('document', this.contractForm.get('document').value, this.contractForm.get('title').value);
    this.api.postContract(formData).subscribe(result => {
    });
  }


  handleFileInput(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.contractForm.get('document').setValue(file);
    }
  }
}

@Injectable({ providedIn: 'root' })
export class ContractService {

    API_URL: string = "http://localhost:59976/api"

    constructor(private http: HttpClient) { }


    postContract(contract: FormData) {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type' : 'multipart/form-data'
            })
          };

        return this.http.post<Contract>(this.API_URL + '/contratos', contract);
    }
}

这是我的服务：

@Injectable({ providedIn: 'root' })
export class AuthInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const userData: string = localStorage.getItem('userData');

        let request = req;

        if (userData != null) {
            const user = JSON.parse(userData);
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${user['_token']}`
                }
            });
        }

        return next.handle(request);
    }
}

export interface Contract {
  id: number;
  title: string;
  document?: File;
}

@Component({
  selector: 'app-contract',
  templateUrl: './contract.component.html'
})
export class ContractComponent implements OnInit {
  contractForm: FormGroup;

  constructor(
    private api: ContractService
  ) { }

ngOnInit() {
    this.contractForm = new FormGroup({
      id: new FormControl(0),
      title: new FormControl(null, [Validators.required]),
      document: new FormControl(null, [Validators.required])
    });
}


  onAddContract() {
    const formData = new FormData();
    formData.append('id', '0');
    formData.append('title', this.contractForm.get('title').value);
    formData.append('document', this.contractForm.get('document').value, this.contractForm.get('title').value);
    this.api.postContract(formData).subscribe(result => {
    });
  }


  handleFileInput(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.contractForm.get('document').setValue(file);
    }
  }
}

@Injectable({ providedIn: 'root' })
export class ContractService {

    API_URL: string = "http://localhost:59976/api"

    constructor(private http: HttpClient) { }


    postContract(contract: FormData) {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type' : 'multipart/form-data'
            })
          };

        return this.http.post<Contract>(this.API_URL + '/contratos', contract);
    }
}

@Injectable（{providedIn:'root'}）
出口类合同服务{
API_URL:字符串=”http://localhost:59976/api"
构造函数（私有http:HttpClient）{}
后合同（合同：FormData）{
常量httpOptions={
标题：新的HttpHeaders({
“内容类型”：“多部分/表单数据”
})
};
返回this.http.post（this.API_URL+'/contratos'，contract）；
}
}

我举了一个小例子：

---

克隆的请求存储在variabe

请求中，但您正在发送原始请求
req
。所以你的拦截器实际上什么都没做。对不起，我没有注意到当我问这个问题时，我还有问题。谢谢你的注意。