以角度发送 multipart/form-data POST API 请求答案

【问题标题】：sending multipart/form-data POST API requests in angualr以角度发送 multipart/form-data POST API 请求
【发布时间】：2020-02-02 12:37:34
【问题描述】：

我正在通过多部分请求发送图像和其他表单数据。当我使用 PostMan 调用 api 时，图像已成功添加。但是当我使用角度代码调用相同的 API 时，我从后端收到错误消息。

Component.ts

addOffer() {
    this.formData = new FormData();
    this.formData.append('promotion', this.file, this.file.name);
    this.formData.append("main_text", this.offerAddForm.controls['title'].value);
    this.formData.append("type", '1');
    this.formData.append("footer_text", 'rdy');

    this._addOfferService.addOffer(this.formData)
      .pipe(first())
        .subscribe(
            data => {
              console.log("Yo yo "+data);
            },
            error => {
              console.log("An Error Occurred add notify ", error);
            });
  }

Service.ts

addOffer(formData) {
    const token = this.authService.getToken();
    let headerOptions = new HttpHeaders({
      'Content-Type': 'multipart/form-data',
      'Authorization': 'Bearer '+token
    });

    const url = environment.baseURL + 'promotions';
    return this.http.post<any>(url, formData, {headers: headerOptions})
      .pipe(map(response => {
        return response;
      }));
  }

更新： 来自后端的错误：

促销类型无效。

请求负载：

我在这里做错了什么？

【问题讨论】：

你遇到了什么错误？
@R.Richards 请参阅更新部分。
您在控制台中看到错误吗？如果有，它显示了什么？
@R.Richards 请查看我上传的最后一张图片。这是 400：错误请求
该错误还显示 Invalid Promotion type。因此，无论您发送什么，API 都不喜欢它。 400 错误意味着您没有发送 API 所需的内容。确保您发布的内容符合 API 的预期。

标签： angular forms api post multipart

【解决方案1】：

 let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('cc', this.PayElement.CC);

    // alert(urlSearchParams.toString());
    this.appService.sendToOtherService('https://dddddd?ggg=dfdf&ddgg=5555, 
      urlSearchParams.toString()).then(res2 => {
//

    }).catch(res3 => {
     //
    });



sendToOtherService(url: string, data: any): Promise<any> {
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(url, data, options).toPromise()
      .then(response => response.json() as any)
      .catch(this.handleError);
  }

【讨论】：

我的抄送是什么意思？
字符串到参数

【解决方案2】：

在 HTML 中

    <div>
    <input hidden id="input-file-id" (change)="sendFile($event)" type="file" />
<label for="input-file-id" class="btn btn-warning ">
<img class="mr-3" src="assets/images/choose_file.png" alt="cloud"> Choose
                                        Files</label>
<p style="color: tomato;">{{isErr}}</p>
<div class="row col-md-12 mt-3 ml-0 pt-4 pb-4" style="border: 2px solid #fbbc04">
<div class="col-md-9" id="wrap">
<span>{{ fileName }}</span>
<audio id="buzzer" controls>
<source [src]="audioSrc" id="wav_src" type="audio/wav" />
<source [src]="audioSrc" type="audio/mpeg" />
    Your browser does not support the audio element.
    </audio>
    </div>
    </div>
    </div>

在控制器/组件中

sendFile(event) {

this.isErr='';
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
  let file: File = fileList[0];
  console.log(file);
  console.log(file.name);
  this.fileName = file.name;
  this.fileSize = file.size;
  this.audioSrc = URL.createObjectURL(file);
  $("#buzzer").attr("src", this.audioSrc);
  this.yourServiceObj.sendAudioService(file)
    .subscribe(data => {
      this.serviceResponse = data;
    },
      error => {
        this.isErr='Something went wrong! Please try after sometime';
      });
}
}

服务中

sendAudioService(blob) {
this.apiUrl = 'your api url';
var data = new FormData();
data.append("audio", blob);

return this.http.post(this.apiUrl, data, {responseType: 'text'})
  .pipe(map(response => {
    return response;
  }));
}

【讨论】：

@Lalinda Sampath，我认为您没有正确发送“this.file”。您尚未指定从何处获取它。