Question

我创建了简单的表单，其中包含三个字段名称，url和文件，角度为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;
        });
}

请帮我确定问题

Answer 1

这是我的服务文件，它正在处理角度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);
 });

Answer 2

刚刚更新了服务功能

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

并且有效

无法接收使用angular提交的文件

2 个答案: