在Angle 2项目中向哪里上传图像? [英] Where to upload image in angular 2 project?

问题描述

我有一个可以上传图像的应用程序.一切工作正常，我自己上传的内容没有问题... 但是我有问题，因为一旦我将图像和存储上传到服务器中，angular-clie就会重新加载页面.

I have an app that can upload images. Everything is working fine, I;m not having issues with the upload itself... But I have issues because as soon as I upload the image and storage in the server, the angular-clie reload the page.

起初，我将图像上传到/src/assets 然后，我认为angular-clie正在刷新页面，因为它检测到它正在列出的文件夹中的一些新内容.所以我改变了这一点，现在图像正在上载到/resources(在src文件夹之外)，所以现在angular-clie不会刷新页面...但是对于Web应用程序来说它们是不可见的，因为它们不在公用文件夹" .

At first, I was uploading the images to /src/assets Then I relized that angular-clie is refreshing the page, because it detect some new content on the folder it's listeing. So I change that and now the images are being uploading to /resources (outside src folder) so now angular-clie is not refreshing the page... But they are not vissible for the web app as they are not in the "public folder".

所以我的问题...在不刷新页面的情况下应将图像上传到哪里?/或如何为angular-cli添加例外?

So my question... Where should I upload the images without fire a page reload? / Or how I add an exception to angular-cli?

作为后端，我将Java与Spring结合使用，并且该部分工作正常. 我的angular2结构是:

As backend I'm using Java with Spring, and that part is working fine. My angular2 structure is:

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

等...

我的angular-cli.json

My 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
      }
    }
  }

上传时的COnsole日志: Angular在开发模式下运行.调用enableProdMode()以启用生产模式.

COnsole Log when uploading: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

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

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

Function to sent file to backend:

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;
  }

推荐答案

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

Well, finally I couldn't make it works in my local environment, but I have to have a dev environment, where I can store the images and open them from there... Anyway, this is not happening in PRD as there I have an Apache server.

这篇关于在Angle 2项目中向哪里上传图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！