• 1399/06/28

form Data and send file in angular :

سلام استاد
من با استفاده از formData میخواهم یک عکس به همراه اطلاعات فرم بفرستم سمت سرور.
فرم را میفرستم ولی درسمت سرور فایل را خالی میگیرد و میزند null

فایل html :

<form [formGroup]="add" (ngSubmit)="submit()">
    <div class="form-group">
        <label for="file">File</label>
        <input type="file" class="form-control" (change)="onFileChange($event.target.files)">
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>
فایل ts:
imageSrc: string;
  add = new FormGroup({
    userName: new FormControl('Aliakbar', Validators.required),
    password: new FormControl('123', Validators.required),
    roleId: new FormControl('3', Validators.required),
    email: new FormControl('aliakbar@gmail.com', Validators.required),
    number: new FormControl('12344456785', Validators.required)
  });
  fileMe:File;
  onFileChange(file:FileList) {
    this.fileMe=file.item(0);
    var reader=new FileReader();
    reader.onload=(event:any)=>{
      this.imageSrc=event.target.result;
    }
    reader.readAsDataURL(this.fileMe);
  }
  submit() {
    this._service.postDataUserTest(this.add.value,this.fileMe);
  }
  سرویس:
  postDataUserTest(user: IUserTest, fileUpload: File) {
    const formData: any = new FormData();
    formData.append('file', fileUpload, fileUpload.name);
    formData.append('userName', user.userName);
    formData.append('password', user.password);
    formData.append('email', user.email);
    formData.append('number', user.number);
    formData.append('roleId', user.roleId);

    this.http.post(this.urlUser, formData).subscribe(
      (response) => console.log(response),
      (error) => console.log(error))
  }

سمت سرور دیباگ میکنم و وارد میشود
ولی فایل را موقع دریافت برابر با null میزند و دریافت نمیشود.

public IActionResult Create([FromForm] user vUser, [FromForm] IFormFile file)
{
.....
}

با postman میفرستم بدون هیچ گونه مشکلی فرستاده میشود ولی در اینجا نه.

لطفا اگر امکان دارد راهنمایی بفرماید.

  • 1399/06/28
  • ساعت 10:57

سلام

تصویر رو باید جدا ارسال کنید 

سرچ کنید send image with angular to web api


  • 1399/06/28
  • ساعت 11:06

یعنی من همزمان با فرم نمیتوانم یک تصویر ارسال کنم؟
ولی در postman این کار انجام میشه و همزمان عکس  و دیگر اطلاعات ارسال میشه


  • 1399/06/28
  • ساعت 11:18

والا تا اونجا که من اطلاع دارم نمیشد 

یه بار همین مشکل رو داشتم بعد از سرچ فهمیدم نمیشه با هم به api ارسال کرد

اگر موفق شدید به من هم اطلاع بدید


  • 1399/06/29
  • ساعت 16:43

بله کاملا درست
من از دیروز درگیر همین هستم و مطمعن شدم که نمیشه این کار رو کرد.

به نظر من بهترین راه اینه که اطلاعات فرم رو ارسال کنم و بعد از جوابی که میگیرم فایل رو ارسال کنم.

ممنون از این که همیشه پاسخگو هستین.


logo-samandehi