Angular2耳目一新做使用XMLHttpRequest

我有這個問題，當我嘗試上傳使用XMLHttpRequest的畫面刷新頁面後，當頁面（和服務全成）Angular2耳目一新做使用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() { 
    } 
}

有什麼我失蹤了嗎？關於這個問題的帖子的MOst講的是按鈕中有Type =按鈕，但我有這個權利。

編輯：我意識到的一點是webpack在提交後重建應用程序。所以我不知道這是否會產生代碼更改，或者是否會讓webpack認爲應用程序需要重建。希望這個幫助，我迷失在這個問題上。

EDIT2：後端信息：的Java控制器

@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; 
}

}

我還在這裏封鎖了好幾天......你知道嗎？

來源

2017-02-17 Faabass

我也有類似的情況。請檢查您上傳的位置在Angular2項目中。由於webpack-dev-server會檢測到任何已更改的文件並重新編譯它。它會導致頁面刷新。我在一臺機器上開發了前端和後端。我上傳了文件並將其存儲到了Angular2資產路徑中。這會導致頁面自動刷新。我不確定你的情況和我一樣，但我希望它能幫助其他人處理同樣的情況。

來源

2017-05-24 03:48:14

HI，哪個是解決方案？我嘗試將圖片上傳到與角度項目不同的位置，但我無法訪問網絡應用中的這些圖片。 – Faabass

Angular2耳目一新做使用XMLHttpRequest

回答

相關問題