相关疑难解决方法(0)

我需要在用户登录后为每个后续请求设置一些授权标头.

要为特定请求设置标头,

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);

// HTTP POST using these headers
this.http.post(url, data, {
  headers: headers
})
// do something with the response

参考

但是以这种方式为每个请求手动设置请求标头是不可行的.

如何在用户登录后设置标头集,并在注销时删除这些标头？

使用角度2 beta,我似乎<input type="file">无法上班.

使用诊断,我可以看到其他type的双向绑定,如text.

<form>
    {{diagnostic}}
    <div class="form-group">
        <label for="fileupload">Upload</label>
        <input type="file" class="form-control" [(ngModel)]="model.fileupload">
    </div>
</form>

在我的TypeScript文件中,我有以下诊断线:

get diagnostic() { return JSON.stringify(this.model); }

可能是因为它不是JSON的问题吗？价值是null.

我无法真正验证它的价值input.У尽管"选择文件..."旁边的文字更新了,但由于某种原因,我无法看到DOM的差异.

我正在使用Angular,TypeScript将文件和JSON数据一起发送到服务器.

以下是我的代码:

import {Component, View, NgFor, FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/angular2';
import {Http, Response, Headers} from 'http/http';


@Component({ selector: 'file-upload' })
@View({
directives: [FORM_DIRECTIVES],
template: `
<h3>File Upload</h3>

<div>
     Select file:
    <input type="file" (change)="changeListener($event)">
</div>

`
})
export class FileUploadCmp {

public file: File;
public url: string;
headers: Headers;


constructor(public http: Http) {
    console.log('file upload Initialized');
    //set the header as multipart        
    this.headers = new Headers();
    this.headers.set('Content-Type', 'multipart/form-data');
    this.url = 'http://localhost:8080/test';
}

//onChange file listener
changeListener($event): void …

实际上,我正在使用一个以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: …

我必须提交一份表格和图片.我试过这个代码(有多种方式),但对我来说不起作用.有没有人有使用angular2上传文件的工作演示请帮助我.

component.html

    <form class="form-horizontal" role="form" >

        <div class="form-group">
            <label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label>
            <div class="col-sm-7">
                <div>
                    <input type="text" class="form-control" id="myname"
                    [(ngModel)]="myfile.name">                        
                </div>                  
            </div>                               
        </div>        


        <div class="form-group">
            <label class="control-label col-sm-4" for="myimage">Image</label>
            <div class="col-sm-7">
                <div>
                    <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />                         
                </div>   
            </div>
        </div>


        <div class="form-group">        
        <div class="text-center">
            <button type="button" (click)="upload()">Upload</button>             
        </div>
        </div>
  </form>

component.ts

     myfile={
                "name":"Mubashshir",               
                "image":''
     }

     fileChangeEvent(fileInput: any){
        this.myfile.image = fileInput.target.files;        
     }

     upload(){
          this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile)
            .subscribe(
                data => {
                            console.log("data submitted");                        
                        },
                err => console.log(err),
                () =>{
                     console.log('Authentication Complete'); …

我有下面的代码：

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() …