尝试使用 kendo-upload 和 Angular 上传文件时出错 5
Error while trying upload a file with kendo-upload and Angular 5
我正在尝试使用 Kendo UI 的 Angular.
上传组件将文件(图像)上传到远程服务器
avatar.component.html
<kendo-upload
[saveUrl]="uploadSaveUrl"
></kendo-upload>
avatar.component.ts
uploadSaveUrl = 'http://localhost:9001/common/file/saveAvatar';
来自浏览器控制台的错误
ERROR TypeError: Cannot read property 'type' of undefined
at SafeSubscriber.eval [as _next] (upload.service.js:151)
at SafeSubscriber.__tryOrSetError (Subscriber.js:249)
at SafeSubscriber.next (Subscriber.js:189)
at Subscriber._next (Subscriber.js:128)
at Subscriber.next (Subscriber.js:92)
at MergeMapSubscriber.notifyNext (mergeMap.js:151)
at InnerSubscriber._next (InnerSubscriber.js:25)
at InnerSubscriber.Subscriber.next (Subscriber.js:92)
at CatchSubscriber.Subscriber._next (Subscriber.js:128)
at CatchSubscriber.Subscriber.next (Subscriber.js:92)
View_UploadComponent_0 @ UploadComponent.html:54
proxyClass @ compiler.js:14645
DebugContext_.logError @ core.js:14981
ErrorHandler.handleError @ core.js:1501
dispatchEvent @ core.js:9948
(anonymous) @ core.js:10569
(anonymous) @ platform-browser.js:2628
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4724
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 14, nodeDef: {…}, elDef: {…}, elView: {…}}
View_UploadComponent_0 @ UploadComponent.html:54
proxyClass @ compiler.js:14645
DebugContext_.logError @ core.js:14981
ErrorHandler.handleError @ core.js:1506
dispatchEvent @ core.js:9948
(anonymous) @ core.js:10569
(anonymous) @ platform-browser.js:2628
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4724
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
更多信息
- 上传组件显示正确,我可以选择文件
- 所有依赖项都是最新的(我做到了:
npm update
)
UploadModule
是我的 shared.module
导入的
HttpClient
由 app.module
导入
以下请求已启动,但没有发生上述错误:
Request URL:http://localhost:9001/common/file/saveAvatar
Referrer Policy:no-referrer-when-downgrade
Provisional headers are shown
Access-Control-Request-Method:POST
Origin:http://localhost:4203
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
package.json
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@auth0/angular-jwt": "^1.0.0-beta.9",
"@fortawesome/fontawesome": "^1.1.2",
"@fortawesome/fontawesome-free-solid": "^5.0.4",
"@progress/kendo-angular-buttons": "^2.0.0",
"@progress/kendo-angular-dateinputs": "^1.4.2",
"@progress/kendo-angular-dialog": "^1.3.0",
"@progress/kendo-angular-dropdowns": "^1.5.0",
"@progress/kendo-angular-excel-export": "^1.0.5",
"@progress/kendo-angular-grid": "^1.6.5",
"@progress/kendo-angular-inputs": "^1.4.2",
"@progress/kendo-angular-intl": "^1.3.0",
"@progress/kendo-angular-l10n": "^1.0.5",
"@progress/kendo-angular-upload": "^2.1.0",
"@progress/kendo-data-query": "^1.1.2",
"@progress/kendo-drawing": "^1.4.0",
"@progress/kendo-theme-default": "^2.46.0",
"angular2-moment": "^1.7.1",
"angular2-toaster": "^4.0.1",
"angular2-tooltips": "^1.0.10",
"cldr-data": "^32.0.0",
"core-js": "^2.4.1",
"ng2-redux": "^5.1.2",
"redux": "^3.7.2",
"rxjs": "^5.5.2",
"tassign": "^1.0.0",
"zone.js": "^0.8.20"
},
请询问更多需要的信息。不知道还能写什么
回答我自己的问题:错误出在我的 HTTP 拦截器中。您必须像这样处理保存请求:
...
if (req.url === `${backendUrl}/file/saveFile`) {
headers = headers.set('Content-Type', 'multipart form-data');
return next
.handle(req)
.catch((error) => {
return this.handleError(error);
});
}
...
我正在尝试使用 Kendo UI 的 Angular.
上传组件将文件(图像)上传到远程服务器avatar.component.html
<kendo-upload
[saveUrl]="uploadSaveUrl"
></kendo-upload>
avatar.component.ts
uploadSaveUrl = 'http://localhost:9001/common/file/saveAvatar';
来自浏览器控制台的错误
ERROR TypeError: Cannot read property 'type' of undefined
at SafeSubscriber.eval [as _next] (upload.service.js:151)
at SafeSubscriber.__tryOrSetError (Subscriber.js:249)
at SafeSubscriber.next (Subscriber.js:189)
at Subscriber._next (Subscriber.js:128)
at Subscriber.next (Subscriber.js:92)
at MergeMapSubscriber.notifyNext (mergeMap.js:151)
at InnerSubscriber._next (InnerSubscriber.js:25)
at InnerSubscriber.Subscriber.next (Subscriber.js:92)
at CatchSubscriber.Subscriber._next (Subscriber.js:128)
at CatchSubscriber.Subscriber.next (Subscriber.js:92)
View_UploadComponent_0 @ UploadComponent.html:54
proxyClass @ compiler.js:14645
DebugContext_.logError @ core.js:14981
ErrorHandler.handleError @ core.js:1501
dispatchEvent @ core.js:9948
(anonymous) @ core.js:10569
(anonymous) @ platform-browser.js:2628
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4724
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 14, nodeDef: {…}, elDef: {…}, elView: {…}}
View_UploadComponent_0 @ UploadComponent.html:54
proxyClass @ compiler.js:14645
DebugContext_.logError @ core.js:14981
ErrorHandler.handleError @ core.js:1506
dispatchEvent @ core.js:9948
(anonymous) @ core.js:10569
(anonymous) @ platform-browser.js:2628
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4724
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
更多信息
- 上传组件显示正确,我可以选择文件
- 所有依赖项都是最新的(我做到了:
npm update
) UploadModule
是我的shared.module
导入的
HttpClient
由app.module
导入
以下请求已启动,但没有发生上述错误:
Request URL:http://localhost:9001/common/file/saveAvatar Referrer Policy:no-referrer-when-downgrade Provisional headers are shown Access-Control-Request-Method:POST Origin:http://localhost:4203 User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
package.json
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@auth0/angular-jwt": "^1.0.0-beta.9",
"@fortawesome/fontawesome": "^1.1.2",
"@fortawesome/fontawesome-free-solid": "^5.0.4",
"@progress/kendo-angular-buttons": "^2.0.0",
"@progress/kendo-angular-dateinputs": "^1.4.2",
"@progress/kendo-angular-dialog": "^1.3.0",
"@progress/kendo-angular-dropdowns": "^1.5.0",
"@progress/kendo-angular-excel-export": "^1.0.5",
"@progress/kendo-angular-grid": "^1.6.5",
"@progress/kendo-angular-inputs": "^1.4.2",
"@progress/kendo-angular-intl": "^1.3.0",
"@progress/kendo-angular-l10n": "^1.0.5",
"@progress/kendo-angular-upload": "^2.1.0",
"@progress/kendo-data-query": "^1.1.2",
"@progress/kendo-drawing": "^1.4.0",
"@progress/kendo-theme-default": "^2.46.0",
"angular2-moment": "^1.7.1",
"angular2-toaster": "^4.0.1",
"angular2-tooltips": "^1.0.10",
"cldr-data": "^32.0.0",
"core-js": "^2.4.1",
"ng2-redux": "^5.1.2",
"redux": "^3.7.2",
"rxjs": "^5.5.2",
"tassign": "^1.0.0",
"zone.js": "^0.8.20"
},
请询问更多需要的信息。不知道还能写什么
回答我自己的问题:错误出在我的 HTTP 拦截器中。您必须像这样处理保存请求:
...
if (req.url === `${backendUrl}/file/saveFile`) {
headers = headers.set('Content-Type', 'multipart form-data');
return next
.handle(req)
.catch((error) => {
return this.handleError(error);
});
}
...