2017-08-10 92 views
-1

我有一个可以上传图片的应用程序。一切工作正常,我; m没有上传本身的问题... 但我有问题,因为只要我上传图像和存储在服务器中,angular-clie重新加载页面。要在角度2项目中上传图像吗?

起初,我是上传图像到/ src/assets 然后我重新定位了角度刷新页面,因为它检测到它正在监听的文件夹上的一些新内容。所以我改变了这一点,现在图像正在上传到/ resources(src文件夹之外),所以现在angular-clie不刷新页面......但是它们对于web应用程序来说不是易用的,因为它们不在“公用文件夹”。

所以我的问题...我应该在哪里上传图像没有消防页重新加载? /或者我如何给angular-cli添加一个异常?

作为后端我使用Java与Spring,并且该部分工作正常。 我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/app(我应该在那里创建它?)但是当我上传图像时,anguular-cli会自动重新加载页面。 这是控制台日志: Angular正在开发模式下运行。调用enableProdMode()以启用生产模式。 {success:true,code:null,data:{...}} [WDS] App updated。重新编译... [WDS]应用程序已更新。重新加载... – Faabass

回答

0

好了,终于我不能让它工作在我的本地环境,但我必须有一个开发环境,在那里我可以存储图像并从那里打开它......无论如何,这不是在珠三角地区发生的,因为我有一台Apache服务器。