Angular 5 HttpClient文件上传 - 处理多部分表格边界

时间：2018-04-11 21:52:17

标签： angular

我正在尝试创建一个与基于Java的API联系的Angular 5应用程序来上传文件。 

  addImage(file: File): Observable<ImageModel> {

    if (this.authService.checkTokenExpired()) {
      this.authService.refresh().subscribe();
        }

    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": undefined
      })
    };
    let form: FormData = new FormData();
    form.append("file", file);
    return this.http.post<ImageModel>(this.imageEndpoint, file, httpOptions);
  }

组件的HTML部分：

 <h2>Open Ticket</h2>
{{file}}
<form (ngSubmit)="onSubmit()" #addForm="ngForm">
  <div class="form-row">
    <div class="form-group col">
      <select (change)="onPropertyChange()" required name="propertyID" [(ngModel)]="model.propertyID">
        <option *ngFor="let prop of properties" [value]="prop.ID">{{prop.shortName}}</option>
      </select>
    </div>
    <div class="form-group col">
      <select required name="itemID" [(ngModel)]="model.itemID">
        <option  *ngFor="let item of items" [value]="item.ID">{{item.description}}</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="notes">Notes</label>
    <textarea required class="form-control" name="notes" id="notes" [(ngModel)]="model.notes"></textarea>
  </div>
  <input type="file" [(ngModel)]="file" name="file" />
  <input type="submit" class="btn btn-primary float-right" value="Open">

</form>

TypeScript部分（调用“addImage”）：

  import { Component, OnInit } from '@angular/core';
import { TicketService } from '../../shared/ticket.service';
import { PropertyModel } from '../../shared/models/property-model';
import { TicketItemModel } from '../../shared/models/ticket-item-model';
import { AddTicketModel } from '../../shared/models/add-ticket-model';

@Component({
  selector: 'app-ticket-add',
  templateUrl: './ticket-add.component.html',
  styleUrls: ['./ticket-add.component.scss']
})
export class TicketAddComponent implements OnInit {

properties : PropertyModel[];
items : TicketItemModel[];
model : AddTicketModel;
file : File;

  constructor(private ticketService : TicketService) { 
    this.model = new AddTicketModel();
  }
  ngOnInit() {
    this.ticketService.getUserProperties()
    .subscribe(res => this.properties = res);

    this.items = [];
  }

  onPropertyChange() {
    this.ticketService.getItems(this.model.propertyID)
    .subscribe((res) => {
      this.items = res;
    })
  }

  onSubmit() {
    if(this.file != null) {

      this.ticketService.addImage(this.file).subscribe(res => {console.log(res)});
    } else {
      console.log("File is null");
    }
  }

}

但是，我遇到了多部分表单边界的问题：

the request was rejected because no multipart boundary was found

根据我的理解，多部分边界字段应该由浏览器自动设置，而不是我们应该计算的字段。我在这里引用了一些问题，包括one，建议将Content-Type设置为undefined。但是，当我这样做时，我收到以下错误（而且堆栈很长）

    TypeError: values is undefined
Stack trace:
HttpHeaders/this.lazyInit/<@webpack-internal:///./node_modules/@angular/common/esm5/http.js:163:1
HttpHeaders/this.lazyInit@webpack-internal:///./node_modules/@angular/common/esm5/http.js:157:17
HttpHeaders.prototype.init@webpack-internal:///./node_modules/@angular/common/esm5/http.js:305:17
HttpHeaders.prototype.copyFrom@webpack-internal:///./node_modules/@angular/common/esm5/http.js:324:9
HttpHeaders.prototype.init@webpack-internal:///./node_modules/@angular/common/esm5/http.js:302:17
HttpHeaders.prototype.forEach@webpack-internal:///./node_modules/@angular/common/esm5/http.js:408:9
HttpXhrBackend.prototype.handle/<@webpack-internal:///./node_modules/@angular/common/esm5/http.js:2212:13
Observable.prototype._trySubscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:177:20
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:165:88
CatchOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/catchError.js:83:16
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13
subscribeToResult@webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32:20
MergeMapSubscriber.prototype._innerSub@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143:18
MergeMapSubscriber.prototype._tryNext@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:140:9
MergeMapSubscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:123:13
Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:100:13
ScalarObservable.prototype._subscribe@webpack-internal:///./node_modules/rxjs/_esm5/observable/ScalarObservable.js:53:13
Observable.prototype._trySubscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:177:20
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:165:88
MergeMapOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:97:16
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13
FilterOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/filter.js:63:16
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13
MapOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/map.js:60:16
Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13
TicketAddComponent.prototype.onSubmit@webpack-internal:///./src/app/ticket/ticket-add/ticket-add.component.ts:35:13
View_TicketAddComponent_0/<@ng:///TicketModule/TicketAddComponent.ngfactory.js:56:23
handleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13763:115
callWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15272:39
debugHandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14859:12
dispatchEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10178:16
eventHandlerClosure/<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12517:38
EventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4559:36
SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:248:13
SafeSubscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:195:17
Subscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:136:9
Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:100:13
Subject.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:65:17
EventEmitter.prototype.emit@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4527:24
NgForm.prototype.onSubmit@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:5840:9
View_TicketAddComponent_0/<@ng:///TicketModule/TicketAddComponent.ngfactory.js:48:23
handleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13763:115
callWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15272:39
debugHandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14859:12
dispatchEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10178:16
renderEventHandlerClosure/<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10803:38
decoratePreventDefault/<@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2680:53
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:421:17
onInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4956:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:420:17
Zone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:188:28
ZoneTask.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:496:24
invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:1540:9
globalZoneAwareCallback@webpack-internal:///./node_modules/zone.js/dist/zone.js:1566:17

这个问题的正确方法是什么？我宁愿不必包含额外的库或包。

感谢。

1 个答案:

答案 0 :(得分：0)

尝试删除httpOption 

addImage(file: File): Observable<ImageModel> {

    if (this.authService.checkTokenExpired()) {
      this.authService.refresh().subscribe();
    }


    let form: FormData = new FormData();
    form.append("file", file);
    return this.http.post<ImageModel>(this.imageEndpoint, file);
}

如果设置“内容类型”，则可以手动定义边界

相关问题
最新问题