代码之家  ›  专栏  ›  技术社区  ›  Jörg Bergner

尝试使用kendo upload和Angular 5上载文件时出错

  •  0
  • Jörg Bergner  · 技术社区  · 7 年前

    我正在尝试使用Angular的Kendo UI上载组件将文件(图像)上载到远程服务器。

    阿凡达组成部分html

    <kendo-upload
            [saveUrl]="uploadSaveUrl"
    ></kendo-upload>
    

    阿凡达组成部分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 由my导入 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
      

    包裹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"
    },
    

    请询问更多需要的信息。我不知道还能写什么。

    1 回复  |  直到 7 年前
        1
  •  -1
  •   Community CDub    6 年前

    回答我自己的问题:错误在我的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);
                });
        }
        ...