在 Angular 2 项目中上传图片的位置？答案

【问题标题】：Where to upload image in angular 2 project?在 Angular 2 项目中上传图片的位置？
【发布时间】：2017-08-10 16:57:00
【问题描述】：

我有一个可以上传图片的应用。一切正常，我上传本身没有问题... 但是我遇到了问题，因为一旦我将图像和存储上传到服务器中，angular-clie 就会重新加载页面。

起初，我将图像上传到 /src/assets 然后我意识到 angular-clie 正在刷新页面，因为它检测到它正在列出的文件夹上的一些新内容。所以我改变了它，现在图像正在上传到 /resources （在 src 文件夹之外），所以现在 angular-clie 没有刷新页面......但它们对于网络应用程序不可见，因为它们不在“公共文件夹”中”。

所以我的问题......我应该在哪里上传图片而不触发页面重新加载？ / 或者我如何向 angular-cli 添加异常？

作为后端，我使用 Java 和 Spring，这部分工作正常。我的angular2结构是：

/
/resources
/src
/src/app
/src/assets
/dist

等等……

我的 angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
  "name": "ng2angle"

    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "app/core/preloader/preloader.scss",
          "styles.scss"
        ],
        "scripts": [
          "../node_modules/jquery/dist/jquery.js",
          "app/core/preloader/preloader.js"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "scss",
      "prefixInterfaces": false,
      "inline": {
        "style": false,
        "template": false
      },
      "spec": {
        "class": false,
        "component": true,
        "directive": true,
        "module": false,
        "pipe": true,
        "service": true
      }
    }
  }

上传时的控制台日志： Angular 正在开发模式下运行。调用 enableProdMode() 启用生产模式。

{success: true, code: null, data: {…}}
[WDS] App updated. Recompiling...
[WDS] App updated. Reloading...

将文件发送到后端的功能：

save(event) {
    let fileList: FileList = event;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('file', file, file.name);
        let headers = new Headers();
        /** No need to include Content-Type in Angular 4 */
        let options = new RequestOptions(this.createAuthHeadersForUpload());
        return this._http.post(`${this.baseUrl + '/save'}`, formData, options)
            .map((response: Response) => <JsonResponse>response.json())
            .do(function (response) {
              console.log(response);
            })
            .catch(this.handleError);
      }
      else
        return null;
  }

【问题讨论】：

如果您希望图片在angular 项目中，则有一个assets 文件夹，其中应该已经包含一个在创建项目时生成的.svg 文件。
请注意，您不应该在生产环境中使用 Angular CLI 实时服务器（这在日志中非常明确）。
我在 /src/assets 中有资产，而不是在 /src/app 中（我应该在那里创建它吗？）但是当我上传图像时，anguular-cli 会自动重新加载页面。这是控制台日志：Angular 正在开发模式下运行。调用 enableProdMode() 以启用生产模式。 {success: true, code: null, data: {…}} [WDS] 应用已更新。重新编译... [WDS] 应用程序已更新。正在重新加载...
@jonrsharpe 在开发过程中在我的本地机器中
我添加了更多信息

标签： angular angular2-routing angular-cli

【解决方案1】：

好吧，最后我无法让它在我的本地环境中工作，但我必须有一个开发环境，我可以在其中存储图像并从那里打开它们......无论如何，这不会在 PRD 发生，因为我有一个 Apache 服务器。

【讨论】：