问题描述
我有一个可以上传图片的应用.一切正常,我没有上传本身的问题......但是我遇到了问题,因为一旦我将图像和存储上传到服务器中,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/assetsThen 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?
作为后端,我在 Spring 中使用 Java,这部分工作正常.我的 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
}
}
}
上传时的控制台日志: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 服务器.
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.
这篇关于在angular 2项目中上传图像的位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!