如何使用ionic-3中的表单数据对图像文件进行发布请求

时间:2019-01-18 16:39:03

标签: angular typescript ionic-framework ionic3 httpclient

我的后端是一个简单的 Laravel API ,当我使用PostMan应用程序时,我的API可以正常工作。

我使用表单数据来发布我的请求,而没有任何标题。它是100%有效的,但是当我尝试使用离子代码时却无法正常工作 This is postman request

-这是错误-

this is the error massage

---这是我的后端代码错误,显示在第55行: enter image description here

selectphoto(){

const options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.FILE_URI,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  saveToPhotoAlbum: false }

this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64 (DATA_URL): base64Image = 'data:image/jpeg;base64,' + imageData;
  this.image = normalizeURL(imageData);
 }, (err) => {
  // Handle error
 });}

 onSubmit(form:NgForm){

  console.log('img' , this.image);
  this.actorBestMovie = form.value.actorBestMovie;
  this.actorCountry = form.value.actorCountry;
  this.actorFirstMovie = form.value.actorFirstMovie;
  this.actorImdbBestMovie = form.value.actorImdbBestMovie;
  this.actorName = form.value.actorName;
  this.actorpost();
  form.reset()  
}

 actorpost() {

  let headers = new Headers();
  headers.append("Accept", "application/json");
  let body = new FormData();
  body.append('file',this.image);
  body.append('name',this.actorName); 
  body.append('country',this.actorCountry );
  body.append('first_movie',this.actorFirstMovie);
  body.append('best_movie',this.actorBestMovie);
  body.append('imdb_best_movie',this.actorImdbBestMovie); 

this.http.post("http://localhost/slreview-api/public/api/actors",body,{headers: headers })
  .map(res => res.json())
  .subscribe(
    data => {
      console.log("data => ", data);
    },
    error => {
      console.log('Error => ', error);
    },
    () => {
      console.log('Completed!');
      this.presentToast();
    }
  );}

我想通过发布请求发布数据 谢谢!

1 个答案:

答案 0 :(得分:0)

更改参数的附加顺序,并将图像文件作为最后一个参数附加到$ echo -n file.txt | sha256sum,如下所示。

FormData