- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试创建一个 Angular 5 应用程序,它联系基于 Java 的 API 来上传文件。
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");
}
}
}
但是,我遇到了多部分表单边界问题:
请求被拒绝,因为没有找到多部分边界
据我了解,多部分边界字段应该由浏览器自动设置,而不是我们应该计算的。我在这里提到了一些问题,包括 one建议将 Content-Type
设置为未定义。但是,当我这样做时,我收到以下错误(以及相当冗长的堆栈)
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
解决这个问题的正确方法是什么?我宁愿不必包含额外的库或包。
谢谢。
最佳答案
尝试移除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);
}
如果您设置“内容类型”,您必须手动定义边界
关于Angular 5 HttpClient 文件上传 - 处理多部分表单边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49784965/
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档,我取得的大部分进展都是通过 GitHub issues 取得的。不,我不明白 HKT,所以没有帮助。 基本上,我在其他地方创建一个类型,ty
我必须创建一个正则表达式来搜索整个文件,以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是,它确实必须是单个正则表达式,并且它确实需要搜索
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
我有一个 if-else 语句,其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段 条件 2:ID 不匹配,所有字段均为空白。 ELSE 语句将它们全部填充 当我使条件
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分,以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题,但我似乎无法让 jsfiddl
这是我的情况: 我想使用 Google AdWords 的转换脚本,但出于某种原因,他们代码段的 javascript 部分在我的页面上添加了一些我似乎无法摆脱的不需要的空白。 所以我正在查看的选项纯
寻找一种优雅的方式在页面上添加一次脚本,就是这样。 我有一个需要 2 个 CSS 文件和 2 个 JS 文件的部分 View 。在大多数地方,只需要其中 1 个部分 View 。但在单个页面上,我需要
我想要一个网站,该网站始终具有相同的部分,具有相同的 id 以及我想要显示的所有内容。我对 javascript 不太了解,我想知道如何删除除特定部分之外的所有内容。 最好的方法是否是只执行一个循环来
SQL 语句教程 (11) Group By 我们现在回到函数上。记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是要算出每一间店 (store_name)
我试图理解部分并认为我已经明白了。基本上,这是一种将部分应用程序应用于二元运算符的方法。所以我了解所有(2*) , (+1)等例子就好了。 但是在 O'Reilly Real World Haskel
有没有办法禁止在部分中覆盖给定的关键字参数?假设我要创建函数 bar总是有 a设置为 1 .在以下代码中: from functools import partial def foo(a, b):
我有这个使用节的 OpenMP 代码 #pragma omp parallel sections num_threads(8) { printf_s("Allo fro
我正在尝试重新创建 Apple 制作的有缺陷的 CNContactPickerViewController,因此我有一个数据数组 [CNContact],我需要将其整齐地显示在 UITableView
我有一个相对布局,其中包含一些 float 在 GridView 上的 TextView 。当我在网格中选择一个项目时,布局向下移动到屏幕的尽头,只有大约 1/5 的部分是可见的。这是使用简单的翻译动
我想在我的 tableView 中有两个部分。我希望将项目添加到第 0 节,然后能够选择一行以将其从第 0 节移动到第 1 节。到目前为止,我已将这些项目添加到第 0 节,但是当它关闭时数据不会加
我正在以自由职业者的身份开发支付控制软件,但我有一些关于 mysql 的问题。 。我有一个用作日志的表,名为“Bitacora”。在表中,我有一个名为 idCliente 的列,它是自己表中一个人的
我有一个 PFQueryTableViewController,我想向 tableview 添加部分,我这样尝试: - (PFQuery *)queryForTable { PFQuery *qu
我正在尝试编写一个查询,将部分匹配项与存储的名称值进行匹配。 我的数据库如下所示 Blockquote FirstName | Middle Name | Surname --------------
我正在开发一个语音备忘录应用程序,并且正在将文件保存到表格 View 中。我希望默认文件名显示为“新文件 1”,如果使用“新文件 1”,则它会显示为“新文件 2”,依此类推。 我正在尝试使用 do-w
我有以下简单的 HTML 布局 .section1 { background: red; } .section2 { background: green; } .section3 { ba
我是一名优秀的程序员,十分优秀!