Angular 角点中不需要的自动加载页面

在upoadImage（）中实现文件上载进度管理后，我的页面会自动重新加载，上载完成后会刷新，但我没有为此插入任何代码。如何解决这个不需要的特性？谢谢

销售新车.component.ts

import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CarUploadService } from '../services/car-upload.service';
import { AuthenticationService } from '../services/authentication.service';
import { Observable, forkJoin } from 'rxjs';
import { HttpEventType, HttpEvent } from '@angular/common/http';

@Component({
  selector: 'app-sell-new-car',
  templateUrl: './sell-new-car.component.html',
  styleUrls: ['./sell-new-car.component.css']
})
export class SellNewCarComponent implements OnInit {

  observable: Observable<any>;

  imageError: string[] = [null, null, null];
  isImageSaved: boolean[] = [false, false, false];
  cardImageBase64: string[] = [null, null, null];
  fileToUpload = [null, null, null];
  imageUrl: string[] = [null, null, null];

  step:boolean[] = [true, false, false, false, false];
  uploading:boolean = false;

  // Size Filter Bytes
  max_size = 1048576; // 1MB
  allowed_types = ['image/png', 'image/jpeg'];
  height = 300;
  width = 300;

  detailsForm: FormGroup;
  carId: number;
  brand: any;
  model: any;
  userId: number;

  constructor(private formBuilder: FormBuilder, private carUploadService: CarUploadService, private authenticationService:AuthenticationService) { }

  ngOnInit() {

    this.detailsForm = this.formBuilder.group({
      brand: ['', Validators.required],
      model: ['', Validators.required],
    });

  }

  // convenience getter for easy access to form fields
  get f() { return this.detailsForm.controls; }

  fileChangeEvent(fileInput: any, formN:number) {

    this.imageError[formN] = null;
    this.cardImageBase64[formN] = null;
    this.isImageSaved[formN] = false;

    this.fileToUpload[formN] = fileInput.target.files[0];

    if (fileInput) {
/*
      if (fileInput.target.files[0].size > this.max_size) {
        //this.imageError = 'Maximum size allowed is ' + max_size / 1000000 + 'MB';
        this.imageError[formN] = 'Maximum size allowed is 1 MB';

        return false;
      }

      if (!_.includes(this.allowed_types, fileInput.target.files[0].type)) {
        this.imageError[formN] = 'Only Images are allowed ( JPG | PNG )';

        return false;
      }
   */
      const reader = new FileReader();
      reader.onload = (e: any) => {
        const image = new Image();
        image.src = e.target.result;
        image.onload = rs => {
          const img_height = rs.currentTarget['height'];
          const img_width = rs.currentTarget['width'];
/*
            if (img_height != this.height || img_width != this.width) {

              this.imageError[formN] = 'Dimentions allowed ' + this.height + '*' + this.width + 'px';

              return false;
            } else {

              this.cardImageBase64[formN] = e.target.result;
              this.isImageSaved[formN] = true;
              this.imageUrl[formN] = fileInput.target.files[0].name;

            }
            */

           this.cardImageBase64[formN] = e.target.result;
           this.isImageSaved[formN] = true;
           this.imageUrl[formN] = fileInput.target.files[0].name;
          };
      };

      reader.readAsDataURL(fileInput.target.files[0]);

    }
  }

  removeImage(formN) {
    this.cardImageBase64[formN] = null;
    this.isImageSaved[formN] = false;
  }

  saveDetails(){
    this.brand = this.detailsForm.controls['brand'].value;
    this.model = this.detailsForm.controls['model'].value;

    this.step[0] = false;
    this.step[1] = true;

  }

  uploadDetails(){

    this.uploading=true;
    this.userId = this.authenticationService.currentUserValue.id;

    this.carUploadService.uploadDetails(this.userId, this.model, this.brand).subscribe( data => {

      this.carId=data['carId'];

      this.uploadImages();

    }, error => {
      console.error(error);
    });

  }

  uploadImages(){

    const imagePath = 'CarsImages/';

    for(let i=0;i<this.imageUrl.length;i++){
      this.carUploadService.uploadImage(this.fileToUpload[i], i, imagePath+this.imageUrl[i], this.carId).subscribe((event:HttpEvent<any>) => {

        if (event.type === HttpEventType.UploadProgress) {
          const percentDone = Math.round(100 * event.loaded / event.total);
          console.log("progress=" + percentDone);
        }

        if (event.type === HttpEventType.Response) {
          if(event.status!=409){
            this.step[4] = false;
            this.step[5] = true;
            console.log('upload successful');
          }
        }

      });

      //INSERIRE LA GESTIONE DEGLI ERRORI

    }

  }

  nextStep(formN:number){

    if(formN == 0){
      this.step[1] = false;
      this.step[2] = true;
    }else if(formN == 1){
      this.step[2] = false;
      this.step[3] = true;
    }if(formN == 2){
      this.step[3] = false;
      this.step[4] = true;
      this.uploadDetails();
    }

  }
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse, HttpEventType, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CarUploadService {

  constructor(private http:HttpClient) { }

  headers = {
    headers: new HttpHeaders({
      'Content-Type' : 'application/json',
      'Accept': 'application/json'
    })
  };

  headersImageBase64 = {
    headers: new HttpHeaders({
      'Content-Type': 'multipart/form-data'
    })
  }

  headersNo = {
    headers: new HttpHeaders({

    })
  }

  uploadDetails(userId, model, brand){

    return this.http.post('http://localhost:8080/uploadCarDetails?userId=' + userId +'&model=' + model +'&brand=' + brand, this.headers);

  }

  uploadImage(image:File, imageN, imageUrl, carId) {

    const progress = new Subject<number>();
    // this will be the our resulting map
    const status: { [key: string]: { progress: Observable<number> } } = {};

    const formData: FormData = new FormData();
    formData.append('image', image, image.name);

    //const req = new HttpRequest('POST', 'http://localhost:8080/uploadCarImage?' + 'imageN=' + imageN + '&imageUrl=' + imageUrl + '&carId=' + carId, formData, {reportProgress: true});
    //return this.http.request(req);
    return this.http.post<HttpEvent<any>>('http://localhost:8080/uploadCarImage?' + 'imageN=' + imageN + '&imageUrl=' + imageUrl + '&carId=' + carId, formData, { observe: 'events', reportProgress: true});
  }

}

从'@angular/core'导入{Component，OnInit}；
从“lodash”导入*as uuu；
从'@angular/forms'导入{FormGroup，FormBuilder，Validators}；
从“../services/car upload.service”导入{CarUploadService}；
从“../services/authentication.service”导入{AuthenticationService}；
从“rxjs”导入{Observable，forkJoin}；
从'@angular/common/http'导入{HttpEventType，HttpEvent}；
@组成部分({
选择器：“应用程序销售新车”，
templateUrl:“./sell new car.component.html”，
styleURL:['./sell new car.component.css']
})
导出类SellNewCarComponent实现OnInit{
可观察的：可观察的；
imageError:字符串[]=[null，null，null]；
isImageSaved:boolean[]=[假，假，假]；
cardImageBase64:string[]=[null，null，null]；
fileToUpload=[null，null，null]；
imageUrl:string[]=[null，null，null]；
步骤：布尔[]=[真，假，假，假，假]；
上传：boolean=false；
//大小筛选器字节
最大大小=1048576；//1MB
允许的_类型=['image/png'，'image/jpeg']；
高度=300；
宽度=300；
detailsForm:FormGroup；
carId：数字；
品牌：任何；
型号：任意；
userId:number；
构造函数（私有formBuilder:formBuilder，私有carUploadService:carUploadService，私有authenticationService:authenticationService）{}
恩戈尼尼特（）{
this.detailsForm=this.formBuilder.group({
品牌：[''，验证器。必填]，
型号：[''，验证器。必需]，
});
}
//方便的getter，便于访问表单字段
get f（）{返回this.detailsForm.controls；}
fileChangeEvent（fileInput:any，formN:number）{
this.imageError[formN]=null；
this.cardImageBase64[formN]=null；
this.isImageSaved[formN]=false；
this.fileToUpload[formN]=fileInput.target.files[0]；
如果（文件输入）{
/*
if（fileInput.target.files[0].size>this.max\u size）{
//this.imageError='允许的最大大小为'+max_size/1000000+'MB'；
this.imageError[formN]=“允许的最大大小为1MB”；
返回false；
}
if（！\包括（this.allowed\类型，fileInput.target.files[0].type））{
this.imageError[formN]=“仅允许图像（JPG|PNG）”；
返回false；
}
*/
const reader=new FileReader（）；
reader.onload=（e:any）=>{
常量图像=新图像（）；
image.src=e.target.result；
image.onload=rs=>{
常数img_height=rs.currentTarget['height']；
常数img_width=rs.currentTarget['width']；
/*
if（img_height！=this.height | | img_width！=this.width）{
this.imageError[formN]=“允许的尺寸”+this.height+“*”+this.width+“px”；
返回false；
}否则{
this.cardImageBase64[formN]=e.target.result；
this.isImageSaved[formN]=true；
this.imageUrl[formN]=fileInput.target.files[0].name；
}
*/
this.cardImageBase64[formN]=e.target.result；
this.isImageSaved[formN]=true；
this.imageUrl[formN]=fileInput.target.files[0].name；
};
};
reader.readAsDataURL（fileInput.target.files[0]）；
}
}
移除图像（格式）{
this.cardImageBase64[formN]=null；
this.isImageSaved[formN]=false；
}
saveDetails（）{
this.brand=this.detailsForm.controls['brand'].value；
this.model=this.detailsForm.controls['model'].value；
此。步骤[0]=错误；
这个。步骤[1]=真；
}
上载详细信息（）{
this.upload=true；
this.userId=this.authenticationService.currentUserValue.id；
this.carUploadService.uploadDetails（this.userId、this.model、this.brand）。订阅（数据=>{
this.carId=data['carId']；
这是uploadImages（）；
}，错误=>{
控制台错误（error）；
});
}
上传图像（）{
常量imagePath='CarsImages/'；
for（设i=0；i{
if（event.type==HttpEventType.UploadProgress）{
const percentDone=Math.round（100*event.loaded/event.total）；
console.log（“progress=“+percentDone”）；
}
if（event.type==HttpEventType.Response）{
如果（事件状态！=409）{
这个。步骤[4]=假；
这个。步骤[5]=真；
console.log（'upload successful'）；
}
}
});
//埃弗里酒店
}
}
下一步（格式：编号）{
如果（formN==0）{
这个。步骤[1]=假；
这个。步骤[2]=真；
}else if（formN==1）{
这个。步骤[2]=假；
这个。步骤[3]=真；
}如果（formN==2）{
这个。步骤[3]=假；
这个。步骤[4]=真；
此参数为.uploadDetails（）；
}
}
}

汽车上传服务.ts

import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CarUploadService } from '../services/car-upload.service';
import { AuthenticationService } from '../services/authentication.service';
import { Observable, forkJoin } from 'rxjs';
import { HttpEventType, HttpEvent } from '@angular/common/http';

@Component({
  selector: 'app-sell-new-car',
  templateUrl: './sell-new-car.component.html',
  styleUrls: ['./sell-new-car.component.css']
})
export class SellNewCarComponent implements OnInit {

  observable: Observable<any>;

  imageError: string[] = [null, null, null];
  isImageSaved: boolean[] = [false, false, false];
  cardImageBase64: string[] = [null, null, null];
  fileToUpload = [null, null, null];
  imageUrl: string[] = [null, null, null];

  step:boolean[] = [true, false, false, false, false];
  uploading:boolean = false;

  // Size Filter Bytes
  max_size = 1048576; // 1MB
  allowed_types = ['image/png', 'image/jpeg'];
  height = 300;
  width = 300;

  detailsForm: FormGroup;
  carId: number;
  brand: any;
  model: any;
  userId: number;

  constructor(private formBuilder: FormBuilder, private carUploadService: CarUploadService, private authenticationService:AuthenticationService) { }

  ngOnInit() {

    this.detailsForm = this.formBuilder.group({
      brand: ['', Validators.required],
      model: ['', Validators.required],
    });

  }

  // convenience getter for easy access to form fields
  get f() { return this.detailsForm.controls; }

  fileChangeEvent(fileInput: any, formN:number) {

    this.imageError[formN] = null;
    this.cardImageBase64[formN] = null;
    this.isImageSaved[formN] = false;

    this.fileToUpload[formN] = fileInput.target.files[0];

    if (fileInput) {
/*
      if (fileInput.target.files[0].size > this.max_size) {
        //this.imageError = 'Maximum size allowed is ' + max_size / 1000000 + 'MB';
        this.imageError[formN] = 'Maximum size allowed is 1 MB';

        return false;
      }

      if (!_.includes(this.allowed_types, fileInput.target.files[0].type)) {
        this.imageError[formN] = 'Only Images are allowed ( JPG | PNG )';

        return false;
      }
   */
      const reader = new FileReader();
      reader.onload = (e: any) => {
        const image = new Image();
        image.src = e.target.result;
        image.onload = rs => {
          const img_height = rs.currentTarget['height'];
          const img_width = rs.currentTarget['width'];
/*
            if (img_height != this.height || img_width != this.width) {

              this.imageError[formN] = 'Dimentions allowed ' + this.height + '*' + this.width + 'px';

              return false;
            } else {

              this.cardImageBase64[formN] = e.target.result;
              this.isImageSaved[formN] = true;
              this.imageUrl[formN] = fileInput.target.files[0].name;

            }
            */

           this.cardImageBase64[formN] = e.target.result;
           this.isImageSaved[formN] = true;
           this.imageUrl[formN] = fileInput.target.files[0].name;
          };
      };

      reader.readAsDataURL(fileInput.target.files[0]);

    }
  }

  removeImage(formN) {
    this.cardImageBase64[formN] = null;
    this.isImageSaved[formN] = false;
  }

  saveDetails(){
    this.brand = this.detailsForm.controls['brand'].value;
    this.model = this.detailsForm.controls['model'].value;

    this.step[0] = false;
    this.step[1] = true;

  }

  uploadDetails(){

    this.uploading=true;
    this.userId = this.authenticationService.currentUserValue.id;

    this.carUploadService.uploadDetails(this.userId, this.model, this.brand).subscribe( data => {

      this.carId=data['carId'];

      this.uploadImages();

    }, error => {
      console.error(error);
    });

  }

  uploadImages(){

    const imagePath = 'CarsImages/';

    for(let i=0;i<this.imageUrl.length;i++){
      this.carUploadService.uploadImage(this.fileToUpload[i], i, imagePath+this.imageUrl[i], this.carId).subscribe((event:HttpEvent<any>) => {

        if (event.type === HttpEventType.UploadProgress) {
          const percentDone = Math.round(100 * event.loaded / event.total);
          console.log("progress=" + percentDone);
        }

        if (event.type === HttpEventType.Response) {
          if(event.status!=409){
            this.step[4] = false;
            this.step[5] = true;
            console.log('upload successful');
          }
        }

      });

      //INSERIRE LA GESTIONE DEGLI ERRORI

    }

  }

  nextStep(formN:number){

    if(formN == 0){
      this.step[1] = false;
      this.step[2] = true;
    }else if(formN == 1){
      this.step[2] = false;
      this.step[3] = true;
    }if(formN == 2){
      this.step[3] = false;
      this.step[4] = true;
      this.uploadDetails();
    }

  }
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse, HttpEventType, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CarUploadService {

  constructor(private http:HttpClient) { }

  headers = {
    headers: new HttpHeaders({
      'Content-Type' : 'application/json',
      'Accept': 'application/json'
    })
  };

  headersImageBase64 = {
    headers: new HttpHeaders({
      'Content-Type': 'multipart/form-data'
    })
  }

  headersNo = {
    headers: new HttpHeaders({

    })
  }

  uploadDetails(userId, model, brand){

    return this.http.post('http://localhost:8080/uploadCarDetails?userId=' + userId +'&model=' + model +'&brand=' + brand, this.headers);

  }

  uploadImage(image:File, imageN, imageUrl, carId) {

    const progress = new Subject<number>();
    // this will be the our resulting map
    const status: { [key: string]: { progress: Observable<number> } } = {};

    const formData: FormData = new FormData();
    formData.append('image', image, image.name);

    //const req = new HttpRequest('POST', 'http://localhost:8080/uploadCarImage?' + 'imageN=' + imageN + '&imageUrl=' + imageUrl + '&carId=' + carId, formData, {reportProgress: true});
    //return this.http.request(req);
    return this.http.post<HttpEvent<any>>('http://localhost:8080/uploadCarImage?' + 'imageN=' + imageN + '&imageUrl=' + imageUrl + '&carId=' + carId, formData, { observe: 'events', reportProgress: true});
  }

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders，HttpParams，HttpResponse，HttpEventType，HttpRequest，HttpEvent}；
从“rxjs”导入{observeable，Subject}；
@注射的({
providedIn:'根'
})
导出类CarUploadService{
构造函数（私有http:HttpClient）{}
标题={
标题：新的HttpHeaders({
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
})
};
headersImageBase64={
标题：新的HttpHeaders({
“内容类型”：“多部分/表单数据”
})
}
校长编号={
标题：新的HttpHeaders({
})
}
上载详细信息（用户ID、型号、品牌）{
返回此.http.post（'http://localhost:8080/uploadCarDetails?userId=“+userId+”&model=”+model+“&brand=”+brand，this.headers）；
}
上载映像（映像：文件、映像、映像URL、carId）{
const progress=新科目