java - Angular2 在使用 XMLHttpRequest 发帖时正在刷新页面

Question

我遇到这个问题，当我尝试使用 XMLHttpRequest 上传图片时，页面会刷新(并且服务成功)

这是我发布图像的功能:

upload(url : string, file : File) : Observable<any> {
      return Observable.create(observer => {
  let formData: FormData = new FormData(),
    xhr: XMLHttpRequest = new XMLHttpRequest();

  formData.append("file", file);

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        observer.next(JSON.parse(xhr.response));
        observer.complete();
      } else {
        observer.error(xhr.response);
      }
    }
  };

  xhr.upload.onprogress = (event) => {
    this.progress = Math.round(event.loaded / event.total * 100);

    this.progressObserver.next(this.progress);
  };

  xhr.open('POST', this.serverService.getURL()  + url, true);
  xhr.setRequestHeader("Authorization", 'Bearer ' + this.sessionService.getToken());
  xhr.send(formData);
});
 }

这是我的 HTML:

<div class="panel">
    <div class="panel-body">
        <h4 class="page-header mt0">Select files</h4>
        <div *ngIf="progress == 0" ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (onFileDrop)="onFileDrop($event)" (filDrop)="fileDropBase($event)" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="box-placeholder my-drop-zone">
            <label for="file2" class="file-upload">
              <button type="button" class="btn btn-default btn-block file-button">Single</button>
              <input id="file2" type="file" ng2FileSelect [uploader]="uploader" (change)="fileSelected()"/>
              </label>
        </div>
        <progressbar *ngIf="progress > 0" class="progress-striped active file-upload" value="{{progress}}" type="danger"><i>{{progress}}%</i></progressbar>
    </div>
</div>

这是我的组件:

export class ImageUploaderComponent implements OnInit {
  progress : number = 0;

  @Input() 
  url: string;

  @Output() 
  fileUploaded= new EventEmitter();

public uploader: FileUploader = new FileUploader({ url: this.url }); 
public hasBaseDropZoneOver: boolean = false;

public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
}

public onFileDrop(file: any): void {
  if(file.length > 0)
      this.imageUploaderService.upload(this.url, file[0]).subscribe((response) => {
        this.fileUploaded.emit({ code : response.data.code, logo : response.data.logo });
    });
}

public fileSelected(): void {
  if(this.uploader.queue.length > 0)
      this.imageUploaderService.upload(this.url, this.uploader.queue[0]._file).subscribe(() => {
        console.log('sent');
    });
}

  constructor(private imageUploaderService : ImageUploaderService) {
    this.imageUploaderService.progress$.subscribe(
        data => {
            console.log('progress = '+data);
            this.progress = data;
        });
  }
  ngOnInit() {
  }
}

我有什么遗漏的吗？关于这个问题的大多数帖子都讨论了在按钮中使用 Type=button ，但我有这个权利。

编辑:我意识到 webpack 在提交后正在重建应用程序。所以我不知道这是否会产生代码更改或导致 webpack 认为应用程序需要重建。希望这会有所帮助，我对这个问题感到困惑。

编辑2:后端信息:Java Controller

@Controller
@CrossOrigin(origins = {"http://localhost:4200", "http://clouderp.com:3000"})
@RequestMapping("/user")
public class UserController {
@RequestMapping(value = "/save", method = RequestMethod.POST, consumes = "multipart/form-data")
public @ResponseBody
Response save(@RequestParam("file") MultipartFile file,
        MultipartHttpServletRequest request) {
    Response response = new Response();
    try {
        response = userService.profileImage(file, JWTTokenAuthFilter.getUsername(request));
    } catch (Exception e) {
        e.printStackTrace();
        response.setCode(CodeList.EXCEPTION);
        response.setSuccess(false);
    }
    return response;
}

}

我仍然被困在这里好几天了......有什么想法吗？

Answer 1

我也有类似的情况。请检查您上传的位置是否在 Angular2 项目内。由于 webpack-dev-server 会检测任何已更改的文件并重新编译它。会导致页面刷新。我在一台机器上开发了前端和后端。我上传了该文件并将其存储到 Angular2 资源路径中。这会导致页面自动刷新。我不确定你的情况是否和我一样，但我希望它可以帮助其他有同样情况的人。