ng2-file-upload上傳附件同時傳參

因爲業務須要，須要的場景是發某條公告的時候可以上傳附件，不僅是圖片，圖片的話能夠直接用base64傳給後臺，但上傳附件這個就不能這樣幹了，

與此同時，每條公告都有一個對應的惟一標識id, 附件以文件流形式傳給後臺，須要再上傳附件的時候加上一個id參數一同傳給後臺。

剛開始一直報400錯誤，500錯誤，開始試圖經過普通的post請求，常規方式傳參，像這種

而後發現不行，搜了好多方法說要設置請求頭content-type，設置瞭然並卵。。還嘗試過經過formdata傳參，結果發現後臺接收不到而後就想到能不能從url中獲取參數

由於前端是用ng2-file-upload這個插件上傳附件

html文件

<input class="file" type="file" ng2FileSelect [uploader]="uploader"  value="點擊上傳" (change)="selectedFileOnChanged($event)"/> 

ts文件

export class NoticeAddComponent implements OnInit {
    uploader: FileUploader = new FileUploader({
      url: `${environment.path}/accessory`,   //上傳地址
      method: "POST",
        allowedFileType:["image","xls","video","pdf","doc"],
        autoUpload: false,
        parametersBeforeFiles:true
   });
   noticeId = 「1」;

    ngOnInit() {
      // 由於這個地方卡殼了很久。。剛開始用的是onAfterAddingFile沒有用onBuildItemForm 這倆區別見文檔： http://www.mamicode.com/info-detail-1930118.html
      this.uploader.onBuildItemForm = (item => {
        console.log(item)
        item.withCredentials = false
        // 把參數加到url裏讓後臺從url獲取
        item.url = item.url+'?noticeId='+this.noticeId
      })
       // 新增保存
  _sendSaveNoticeSever(){
    this.interfaceService.sendSaveNoticeSever({
      data:this.addParams,
      onSuccess:(res)=>{
        console.log('新增保存')
        console.log(res)
        this.noticeId = res.data.data.toString();
        // 在保存這條公告以後得到保存接口返回的id, 調用上傳文件方法把這個id傳參給後臺
        this.uploadFile(); 
      },
      onFailed:(err)=>{
        console.log(err)
      }
    })
  }

  }

}

 

 ng2-file-upload裏的方法 onAfterAddingFile 和 onBuildItemForm 必定要注意，由於這裏的場景是須要保存獲取id以後再上傳附件，因此須要調用onBuildItemForm 這個方法，這個須要注意一下