2017-08-10 12 views
-1

私は画像をアップロードできるアプリを持っています。すべては正常に動作しています;私はアップロード自体に問題がありません... しかし、私は問題を抱えています。サーバに画像とストレージをアップロードすると、角度のあるclieがページをリロードします。Angular 2プロジェクトに画像をアップロードするには?

最初に、/ src/assetsに画像をアップロードしました 次に、それがリッスンしているフォルダの新しいコンテンツを検出するので、その角度のクライはページをリフレッシュしています。だから私はそれを変更し、画像は/リソース(srcの外のフォルダ)にアップロードされているので、今は角度のclieはページをリフレッシュしていません...しかし、彼らは "パブリックフォルダにないので、 "

私の質問...どこで画像をアップロードせずにページをリロードする必要がありますか? /または、どのように私は角度cliに例外を追加しますか?

私はSpringでJavaを使用していますが、その部分はうまくいきます。 マイangular2構造は次のとおりです。

など
/ 
/resources 
/src 
/src/app 
/src/assets 
/dist 

...

マイ角度-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 
     } 
    } 
    } 

コンソールログのアップロード: 角度が開発モードで実行されています。プロダクションモードを有効にするには、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; 
    } 
+0

画像を 'angular'プロジェクトの中に入れたいのであれば、' assets'フォルダがあります。このフォルダには、プロジェクトの作成時に生成された '.svg'ファイルが入っているはずです。 –

+1

本番環境でAngular CLIライブサーバーを使用しないでください(ログには明示的です)。 – jonrsharpe

+0

/src/assetsに/ src/assetsにアセットがあります(そこに作成する必要がありますか?)しかし、そこに画像をアップロードすると、anguular-cliはページを自動的にリロードします。 これはコンソールログです。 角度は展開モードで実行されています。プロダクションモードを有効にするには、enableProdMode()を呼び出します。 {success:true、code:null、data:{...}} [WDS]アプリケーションが更新されました。再コンパイル中... [WDS]アプリケーションが更新されました。再ロード中... – Faabass

答えて

0

まあ、最終的に私はそれが私のローカル環境で動作させることができませんでしたが、私は私が格納できるのdevの環境を、持っている必要がありますが画像を開いてそこから開きます...とにかく、これはPRDにはApacheサーバーがあるので、これは起こりません。

関連する問題