Angular 2 - 图片上传,文件未上传到后端(未列出错误)

Aas*_*das 1 image-uploading angular

我试图以角度2上传图像,我没有列出错误但是文件添加的位置没有变化详细代码在下面给出

**.ts**
............
  onFileChange(event) {
    if(event.target.files.length > 0) {
      let file = event.target.files[0];
      this.fileName = file.name;
      this.imageUpload['upload'] = this.fileName;
      this.form.get('upload').setValue(file);
      console.log(file);
      console.log('filename',this.fileName);


    }
  }

 private prepareSave(): any {
    let inputVal = new FormData();
    inputVal.append('upload', this.form.get('upload').value,this.imageUpload['upload']);
    console.log(inputVal);
    return inputVal;
  }

  onSubmit() {
    this.imageUpload['upload'] = this.fileName;
    const formModel = this.prepareSave();
    this.loading = true;

    var body = formModel;
    let url = this.ImageUploadURL;
    let headers = new Headers({ 'Content-Type': 'multipart/form-data' ,'Authorization': 'Bearer ' + this.accountsService.accessToken });
    let options = new RequestOptions({ headers: headers });

    console.log(options);
    console.log(body);
    console.log(url);
    // In a real-world app you'd have a http request / service call here like
     return this.http.post(url, body, options)
          .catch(error => Observable.throw(error))
          .subscribe(
              data => console.log('success'),
              error => console.log(error)

        )
  }
...............
Run Code Online (Sandbox Code Playgroud)

在控制台中获得成功在此输入图像描述

该方法使用网址发布, {upload:""}

在网络即时通讯中在此输入图像描述

可能是所需部分没有变化的错误?

还有其他方法吗?

Cyp*_*ier 5

在Angular中,当使用多部分表单数据并且您正在使用FormData对象时,您不能指定Content-Type标头.

通过这样做,您可以阻止http堆栈将其设置为必须包含边界值的正确.

只需删除内容类型标题,让格式化程序为您处理,您应该没问题.