无法接收使用角度提交的文件答案

【问题标题】：Not able to receive files submitted using angular无法接收使用角度提交的文件
【发布时间】：2018-04-16 10:08:44
【问题描述】：

我创建了一个简单的表单，其中包含三个字段名称、url 和 angular 5 中的文件。

我正在提交数据以保存在 laravel 中创建的 api，由于文件输入字段，这里我没有在后端接收数据。

如果我从请求中删除文件输入并提交表单，它工作正常。

这是我用 typescript 和 angular 编写的代码

onSelectFile(event: any) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();
        let file:File = event.target.files[0];
        this.bannerImage = event.target.files[0];
        reader.readAsDataURL(event.target.files[0]); // read file as data url

        reader.onload = (event: any) => { // called once readAsDataURL is completed
            this.bannerImagePreview = event.target.result;
            this.bannerFileName = file.name;

        }
    }
}

这里是调用上传服务的代码

uploadBannerCreative(event) {

    this.loading = true;
    let formData:FormData = new FormData();

    formData.append("name", this.bannerCreativeName);
    formData.append("click_url", this.bannerCreativeURL);
    formData.append("file", this.bannerImage,"test");

    let headers = new Headers();
    headers.append('Content-Type', undefined);
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Bearer ' + JSON.parse(localStorage.getItem('_token')));

    this._uploadCreativeService.uploadBannerCreative(formData, headers).subscribe(
        data => {
            this.loading = false;
        },
        error => {
            this.loading = false;
        }
    );
 }

这里是上传文件的服务

uploadBannerCreative(data, headers) {

    return this.http.post('http://localhost/api/campaign/upload-image', (data), { headers: headers })
        .map((response: Response) => {
            return response;
        });
}

请帮我找出问题

【问题讨论】：

请不要在header中发送accept和content-type参数
试过它只是保留 headers.append('Authorization', 'Bearer' + JSON.parse(localStorage.getItem('_token')));但没有工作
我正在发布我的代码
是的，请分享一下

标签： javascript angular typescript angular5

【解决方案1】：

这是我的服务文件，它适用于 angular 5 和 laravel 5 +

makeFileRequest(url: string, formData: FormData, source: String = null) {
return new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject(xhr.response);
      }
    }
  };
//   AppService.setUploadUpdateInterval(500);
  xhr.upload.onprogress = (event) => {
    this.progress = Math.round(event.loaded / event.total * 100);
   // this.userService.showPercent(this.progress);

  };
  xhr.open('POST', url);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.setRequestHeader('accept', 'application/json');    
  //xhr.setRequestHeader('utc-offset', this.UTC_OFFSET);
  //xhr.setRequestHeader('platform', this.PLATFORM);
  //xhr.setRequestHeader('app-version', this.APP_VERSION);
  //xhr.setRequestHeader('version', this.VERSION);
  // xhr.setRequestHeader('accept', this.ACCEPT);
  //xhr.setRequestHeader('device', this.DEVICE);
  if (localStorage.getItem('userData')) {   
    const user = JSON.parse(localStorage.getItem('userData'));
    // use your own bearer token
    xhr.setRequestHeader('token', user.token); 
    xhr.setRequestHeader('session', user.session);
  }
  xhr.send(formData);
});

}

组件级别：-

 let formData:FormData = new FormData();
 formData.append("name", this.bannerCreativeName);
 formData.append("click_url", this.bannerCreativeURL);
 formData.append("file", this.bannerImage,"test");
 this.appService.makeFileRequest(url, formData).then(resdata => {
        console.log(data);
 }, error => {
      console.log(error);
 });

【讨论】：

【解决方案2】：

刚刚更新服务功能到

let promise = new Promise((resolve, reject) => {
            this.http.post(url,data,options)
              .toPromise()
              .then(
                res => { // Success
                  console.log(res.json());
                  resolve();
                }
              );
          });
          return promise;

成功了

【讨论】：