Question

我正在使用Angular框架，
我尝试通过 FormData
我正在共享我的代码

component.ts

const ProposalData: FormData = new FormData();
ProposalData.append('customerId', this.customerId);
ProposalData.append('file', this.file);
const token  = localStorage.getItem('currentUser');
this.rest.newProposals(ProposalData , token).subscribe(
        result => { console.log(result) } 
                                        );

service.ts

newProposals(value , token) {
   let headers = new HttpHeaders();
   headers = headers.append('Content-Type', 'application/json; charset=utf-8');
   headers = headers.append('Authorization', token);
   return this.http.post<any>(this.addProposals , value , {headers});
  }

问题是

一旦尝试通过Post方法将formData发送到服务器，服务器上将无法访问我的数据，并且服务器上的FormData将为空
。

注意：当我console.log formData时，对数据的控制台是正确的。却不会以某种方式发送到服务器

Answer 1

您可以在component.ts中尝试这样

 uploadPhoto() {

   let userid = "43345;
  this.LoaderService.display(true);
  var nativeElement: HTMLInputElement = this.fileInput.nativeElement;
  var file = nativeElement.files[0];
  nativeElement.value = '';
  this.sampleService.ImageUpload(userid, file)
    .subscribe(photo => {
      this.LoaderService.display(false);
     ,
      err => {
        this.LoaderService.display(false);

      });

}

.html文件中的.HMTL文件中的

这样做

  <input class="hidden" type="file" (change)="readURL($event);" name="Uploadfile" 
   id="file" style="width: 100%;cursor: pointer;" #fileInput>

在服务文件中执行以下操作

    ImageUpload(id, file) {
    var formData = new FormData();
    formData.append('file', file);
    return this.Http.post(this.url+ 'ImageUpload' + '/' + id, formData);
  }

在WEB API中确实如此

[HttpPost("ImageUpload/{Id}")]
public async Task<IActionResult> plantFileUpload(string id, [FromForm(Name = "file")] IFormFile file)
{

}

这应该有效

Answer 2

将内容类型从headers = headers.append('Content-Type', 'application/json; charset=utf-8');更改为

headers = headers.append('Content-Type', 'application/x-www-form-urlencoded'); in service file

更正了 Service.ts 文件

newProposals(value , token) {
   let headers = new HttpHeaders();
   headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
   headers = headers.append('Authorization', token);
   return this.http.post<any>(this.addProposals , value , {headers});
  }

Answer 3

您的.HTML文件中的

<input type='file' id="upload_file" name="images" (change)="onChangeEvent($event)">

在component.ts文件中

onChangeEvent(event) {
    this.selectedFileName = [];
    let fileList: FileList = event.target.files;
    let i;
    for (i = 0; i < fileList.length; i++) {
        let label = fileList[i].name;
        this.uploadFileName.set(i, label);
        this.selectedFileName.push(label);
    }
    this.uploadImages();
  }

  uploadImages() {
    let fileList = this.elem.nativeElement.querySelector('#upload_file').files;

    if (fileList.length === 0) {
        swal.fire(
            'File upload Error.',
            'Please select Document.',
            'error');
    } else {
        let i;
        let formData: FormData = new FormData();
        formData.append('length', fileList.length);

        for (i = 0; i < fileList.length; i++) {
            let file: File = fileList[i];
            let fname = file.name;
            let fsize = file.size;
            let ftype = file.type;

   if (ftype === 'application/pdf' || ftype === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || ftype === 'application/msword' || ftype === 'image/jpeg' || ftype === 'image/jpg' || ftype === 'image/png') {
                this.layoutService.showLoading();
                formData.append('user_profile_picture', file, file.name);
            } else {
                swal.fire(
                    'Unsupported Document',
                    'Only PDF, PNG, JPG and DOCX Type Allow.',
                    'error');
                this.layoutService.hideLoading();
                return false;
            }
        }

        this.profileService.uploadProfilePic(formData).subscribe(response => {
            this.layoutService.hideLoading();
            this.getProfilePic();
        }, (err) => {
            this.layoutService.hideLoading();
        });
     }
   }

服务文件

 public uploadProfilePic(formdata: any) {
    let headers = new HttpHeaders();
    return this._http.post(environment.apiUrl + 'user- 
 profile/upload_user_profile_picture', formdata, {headers: headers});
 }

无法将formData发送到服务器

3 个答案: