我有一个可以上传图片的应用程序。一切工作正常,我; 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;
}
如果您希望图片位于'angular'项目中,那么会有一个'assets'文件夹,该文件夹应该已经包含创建项目时生成的'.svg'文件。 –
请注意,您不应该在生产中使用Angular CLI实时服务器(这在日志中非常明确)。 – jonrsharpe
我有/ src/assets中的资源,而不是/ src/app(我应该在那里创建它?)但是当我上传图像时,anguular-cli会自动重新加载页面。 这是控制台日志: Angular正在开发模式下运行。调用enableProdMode()以启用生产模式。 {success:true,code:null,data:{...}} [WDS] App updated。重新编译... [WDS]应用程序已更新。重新加载... – Faabass