相关疑难解决方法(0)

实际上,我正在使用一个以Angular 2编码的接口的Spring REST API.

我的问题是我无法使用Angular 2上传文件.

我在java中的Webresources是这样的:

@RequestMapping(method = RequestMethod.POST, value = "/upload")
public String handleFileUpload(@RequestParam MultipartFile file) {
    //Dosomething 
}

当我通过带有Auth标头等的URL请求调用它时,它完全正常工作...(使用Chrome的Advanced Rest Client扩展)

证明:(在这种情况下一切正常)

我加了

<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

Spring配置文件和Pom依赖项

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2</version>
</dependency>

但是,当我尝试使用webform执行相同的操作时:

<input type="file" #files (change)="change(files)"/>
<pre>{{fileContents$|async}}</pre>

使用(更改)方法:

change(file) {
    let formData = new FormData();
    formData.append("file", file);
    console.log(formData);
    let headers = new Headers({
        'Authorization': 'Bearer ' + this.token,
        'Content-Type': 'multipart/form-data'
    });
    this.http.post(this.url, formData, {headers}).map(res => res.json()).subscribe((data) => console.log(data));
    /*
    Observable.fromPromise(fetch(this.url,
        {method: 'post', body: formData},
        {headers: …

我需要上传一个文件并发送一些json,我有这个功能:

POST_formData(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem('authtoken');

        if (authtoken) {
            headers.append("Authorization", 'Token ' + authtoken)
        }

        headers.append("Accept", 'application/json');
        headers.delete("Content-Type");

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: data
        })

        return this.http.request(new Request(requestoptions))

        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        })
    }

我的问题是,如果我设置content-type为" multipart/form-data"我的服务器抱怨边界,如果我content-type完全删除标头,我的服务器抱怨它" text/plain"支持的媒体类型.

那么,如何使用angular2发送FormData？

出于一些奇怪的原因,在线没有任何教程或代码示例显示如何使用Angular2 Reactive表单,而不仅仅是简单的输入或选择下拉列表.

我需要创建一个表单让用户选择他们的头像.(图像文件)

以下不起作用.(即"头像"属性从不显示任何值更改.)

profile.component.html:

               <form [formGroup]="profileForm" novalidate>
                 
                        <div class="row">
                            <div class="col-md-4 ">
                                <img src="{{imgUrl}}uploads/avatars/{{getUserAvatar}}" style="width:150px; height:150px;float:left;border-radius:50%;margin-right:25px;margin-left:10px;">

                                <div class="form-group">
                                    <label>Update Profile Image</label>
                                    <input class="form-control" type="file" formControlName="avatar">
                                </div>
                            </div>
                            <div class="col-md-8 ">
                                <div class="form-group">
                                    <label >Firstname:
                                        <input class="form-control" formControlName="firstname">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Lastname:
                                        <input class="form-control" formControlName="lastname">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Email:
                                        <input class="form-control" formControlName="email">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Password:
                                        <input class="form-control" type="password" formControlName="password">
                                    </label>
                                </div>
                            </div>
                        </div>
                 
                </form>
                <p>Form value: {{ profileForm.value | json }}</p>
                <p>Form status: …

我有下面的代码：

import { Component, OnInit, ElementRef } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'

@Component({
  selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  showSort: boolean = false;
  form: FormGroup;
  name: FormControl;
  sortSelf: FormControl;
  sortItem: FormArray;
  locationItems: FormArray;

  constructor(private _fb: FormBuilder, private _elementRef: ElementRef ) {
  }

  ngOnInit(): void {
    this.sortItem = this._fb.array([this.initSort()]);

    this.form = this._fb.group({
      sortItem: this.sortItem
    });
  }

  initSort() {
    return this._fb.group({
      locationPicture: new FormControl('', []),
      locationItems: this._fb.array([
        this.initSortItems() …

我正在使用systemJS来管理我的包,所以我已经将这些行添加到我的systemjs的配置文件中:

{
  map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  packages: {
    'ng2-file-upload': {
        main: './ng2-file-upload/ng2-file-upload.js', // also tried with './ng2-file-upload.js'
        defaultExtension: 'js'
    },
  }
}

我导入NG2文件上传通过import { FileDrop, FileUploader } from 'ng2-file-upload';.

但导入导致我的应用程序"崩溃":我的typscript编译器似乎运行良好(我可以看到由于其他代码的日志),但修改不再被转换,所以我不能运行任何东西.我没有与ng2-file-upload相关的任何错误日志(除了很多Duplicate identifiers).

任何的想法 ？

编辑:我已经将这个包从node_modules我的应用程序(vendor)附近的文件夹中提取出来,并且我使用了相对路径导入FileDrop,FileUploader但是systemjs无法导入:

Error: SyntaxError: Unexpected token <(…)

编辑2:这是一些细节.我的应用程序在public其中包含2个子文件夹:src和build.我在里面写了ts代码src(很明显),我的tsc将转换后的文件保存到build.目前,我没有捆绑我的文件,因此里面的层次结构build与那个层次结构相同src.

但只有ng2-file-upload才会发生奇怪的事情:在转换过程中,tsc会在node_modules/ng2-file-upload里面添加一个文件夹build.这是树木: …