2017-05-23 47 views
3

我想使用Angular2和SpringBoot完成我的文件上傳功能。我可以證明我的文件上傳的java代碼正常工作,因爲我已經使用Postman成功地進行了測試。所需的部分'文件'不存在 - Angular2發佈請求

但是,當涉及到從Angular2前端發送文件時,我得到的HTTP 400響應是Required request part 'file' is not present

這是我如何發送來自Angular2的POST請求。

savePhoto(photoToSave: File) { 

    let formData: FormData = new FormData(); 
    formData.append('file', photoToSave); 

    // this will be used to add headers to the requests conditionally later using Custom Request Options 
    this._globals.setRequestFrom("save-photo"); 


    let savedPath = this._http 
     .post(this._endpointUrl + "save-photo", formData) 
     .map(
     res => { 
      return res.json(); 
     } 
     ) 
     .catch(handleError); 

    return savedPath; 

} 

請注意,我已經寫了CustomRequestOptions類以追加Authorization頭和內容類型頭伸出BaseRequestOptions。內容類型標題將有條件添加。

以下是該代碼。

@Injectable() 
export class CustomRequestOptions extends BaseRequestOptions { 
    constructor(private _globals: Globals) { 
     super(); 

     this.headers.set('X-Requested-By', 'Angular 2'); 
     this.headers.append('virglk', "vigamage"); 
    } 

    merge(options?: RequestOptionsArgs): RequestOptions { 

     var newOptions = super.merge(options); 

     let hdr = this._globals.getAuthorization(); 
     newOptions.headers.set("Authorization", hdr); 

     if(this._globals.getRequestFrom() != "save-photo"){ 
      newOptions.headers.set('Content-Type', 'application/json'); 
     }else{ 
      //request coming from save photo 
      console.log("request coming from save photo"); 
     } 

     return newOptions; 
    } 

} 

這個條件頭附加工作正常。這樣做的目的是,如果我爲每個請求添加'Content-Type', 'application/json'頭文件,Spring控制器中的文件上傳方法將不會接受它。 (回報http 415)

一切似乎都很好。但是我得到Required request part 'file' is not present錯誤響應。這是爲什麼?我將這個參數添加到Data形式。

let formData: FormData = new FormData(); 
formData.append('file', photoToSave); 

這是Spring Controller方法供您參考。

@RequestMapping(method = RequestMethod.POST, value = "/tender/save-new/save-photo", consumes = {"multipart/form-data"}) 
public ResponseEntity<?> uploadPhoto(@RequestParam("file") MultipartFile file){ 

    if (file.isEmpty()) { 
     ErrorResponse errorResponse = new ErrorResponse(); 
     errorResponse.setMessage("DEBUG: Attached file is empty"); 
     return new ResponseEntity<ErrorResponse>(errorResponse, HttpStatus.NOT_FOUND); 
    } 
    String returnPath = null; 
    try { 
     // upload stuff 
    } catch (IOException e) { 
     ErrorResponse errorResponse = new ErrorResponse(); 
     errorResponse.setMessage(e.getMessage()); 
     return new ResponseEntity<ErrorResponse> (errorResponse, HttpStatus.INTERNAL_SERVER_ERROR); 
    } 

    return new ResponseEntity<String>(returnPath, HttpStatus.OK); 
} 

編輯 - 添加請求的瀏覽器

enter image description here

正如你所看到的,帕拉姆「文件」可有拍攝的有效載荷。

+0

具有完全相同的問題。請讓我知道,如果你解決了這個問題 –

+0

嗨,只是想通了。問題是從DOM獲取輸入對象。服務器代碼沒有問題。當你控制檯登錄輸入文件時,wt打印出來?只是讓我知道 – vigamage

+1

謝謝布羅!你的提示奏效了!我將一組文件傳遞給服務器而不是單個陣列!謝謝!! –

回答

0

嘗試

headers: { 
      'Content-Type': 'multipart/form-data' 
     }, 

添加到您的

.post(this._endpointUrl + "save-photo", formData) 
+0

試過這個。沒有運氣 :( – vigamage

相關問題