使用 ng2-file-upload 上传文件时出现 404（未找到）错误

Question

我正在使用 ng2-file-upload 将文件上传到我的 angular2 应用程序。问题是当我点击 'upload' 按钮时，出现 404（未找到）错误，这意味着找不到我为上传设置的目录。这是我的组件：

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

const URL = 'http://localhost:4200/src/app/uploads/';

@Component({
  selector: 'upload-file',
  templateUrl: 'upload-file.html'
})
export class UploadCvComponent {
  uploader: FileUploader = new FileUploader({ url: URL });
  hasBaseDropZoneOver: boolean = false;
  hasAnotherDropZoneOver: boolean = false;

  fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

  fileOverAnother(e: any): void {
    this.hasAnotherDropZoneOver = e;
  }
}

我在 /src/app/uploads/ 创建了一个用于保存上传文件的目录。我还需要做些什么才能让它工作，还是 FileUploader 应该完成剩下的工作？我相信我得到的错误是因为我正在为 Angular2 应用程序使用路由器，并且 URL (http://localhost:4200/src/app/uploads/) 未在路由器中定义。

有人可以指点一下吗？非常感谢！

Answer 1

常量 URL 应替换为将接收和处理上传文件的后端应用程序 (URL:端口)。

如果您使用的是文件-catcher.js样本，正确的应该是：

const URL = 'http://localhost:3000/api/

---- x ----

文件夹demo\src\app\components\file-upload内有3个文件：

simple-demo.html 
simple-demo.ts 
file-catcher.js

此 file-catcher.js 是后端的示例代码，它将处理您的上传请求。要达到运行，您需要 Node.js。所以基本上，你必须打开一个终端，转到这个文件夹并执行 node file-catcher.js （第一个 make shure 使用 npm 安装所有依赖项）。这将在端口 3000 上创建一个服务器运行ning，它将接收 Angular 上传请求并保存文件（在本例中，在文件夹 uploads 中- 确定对它的正确权限）。

这里有一个步骤，希望对你有所帮助： https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/

使用 ng2-file-upload 上传文件时出现 404（未找到）错误

404 (Not Found) error when uploading files with ng2-file-upload

file-upload

angular2-routing

ng2-file-upload