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 这个方法，这个须要注意一下