Angular - 上传文件的POST请求

Question

我正在使用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 {
    this.postFile($event.target);
}

//send post file to server 
postFile(inputValue: any): void {

    var formData = new FormData();
    formData.append("name", "Name");
    formData.append("file",  inputValue.files[0]);

    this.http.post(this.url +,
      formData ,
        {
            headers: this.headers

        });
}

}

如何将formData转换为字符串并发送到服务器？我记得在AngularJS（v1）中，您会使用transformRequest。

- Kamal

---

数据不能在这个 http.post 行之前转换吗？http 是一个可观察对象并且需要选项，请尝试搜索源代码，你可能会找到一个例子，https://github.com/angular/angular/blob/8ed22ce6e7ce0e00c12b036d02627424c6b4ff35/modules/angular2/src/http/http.ts - Angular University

你在这方面有任何进展了吗？ - Canastro

GitHub上有一个未处理的功能请求 https://github.com/angular/angular/issues/2803 - martin

看这里，我在长时间的奋斗后解决了它 2017.8.25，https://dev59.com/Up7ha4cB1Zd3GeqPmKBv#45879409 - Belter

Answer 1

看我的代码，但要注意。 我使用async / await，因为最新的Chrome beta可以读取通过TypeScript编译的任何ES6代码。 因此，您必须用.then()替换async / await。

输入更改处理程序：

/**
 * @param fileInput
 */
public psdTemplateSelectionHandler (fileInput: any){
    let FileList: FileList = fileInput.target.files;

    for (let i = 0, length = FileList.length; i < length; i++) {
        this.psdTemplates.push(FileList.item(i));
    }

    this.progressBarVisibility = true;
}

提交处理程序：

public async psdTemplateUploadHandler (): Promise<any> {
    let result: any;

    if (!this.psdTemplates.length) {
        return;
    }

    this.isSubmitted = true;

    this.fileUploadService.getObserver()
        .subscribe(progress => {
            this.uploadProgress = progress;
        });

    try {
        result = await this.fileUploadService.upload(this.uploadRoute, this.psdTemplates);
    } catch (error) {
        document.write(error)
    }

    if (!result['images']) {
        return;
    }

    this.saveUploadedTemplatesData(result['images']);
    this.redirectService.redirect(this.redirectRoute);
}

FileUploadService。该服务还将上传进度存储在progress$属性中，在其他地方，您可以订阅它并每500ms获取新值。

import { Component } from 'angular2/core';
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/share';

@Injectable()
export class FileUploadService {
/**
 * @param Observable<number>
 */
private progress$: Observable<number>;

/**
 * @type {number}
 */
private progress: number = 0;

private progressObserver: any;

constructor () {
    this.progress$ = new Observable(observer => {
        this.progressObserver = observer
    });
}

/**
 * @returns {Observable<number>}
 */
public getObserver (): Observable<number> {
    return this.progress$;
}

/**
 * Upload files through XMLHttpRequest
 *
 * @param url
 * @param files
 * @returns {Promise<T>}
 */
public upload (url: string, files: File[]): Promise<any> {
    return new Promise((resolve, reject) => {
        let formData: FormData = new FormData(),
            xhr: XMLHttpRequest = new XMLHttpRequest();

        for (let i = 0; i < files.length; i++) {
            formData.append("uploads[]", files[i], files[i].name);
        }

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.response));
                } else {
                    reject(xhr.response);
                }
            }
        };

        FileUploadService.setUploadUpdateInterval(500);

        xhr.upload.onprogress = (event) => {
            this.progress = Math.round(event.loaded / event.total * 100);

            this.progressObserver.next(this.progress);
        };

        xhr.open('POST', url, true);
        xhr.send(formData);
    });
}

/**
 * Set interval for frequency with which Observable inside Promise will share data with subscribers.
 *
 * @param interval
 */
private static setUploadUpdateInterval (interval: number): void {
    setInterval(() => {}, interval);
}
}

- Качалов Тимофей

---

我还需要添加：xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 才能让它工作。 - patad

@patad：你有这方面的问题吗？当我上传XML文件时，它会自动在我的文件中添加“------WebKitFormBoundaryklb8qUzyCQJSI440 Content-Disposition: form-data; name="file"”，我不想在传输过程中向文件添加额外的数据，你知道如何处理吗？对于像jpg这样的上传图像，在上传后，它不再是一个jpg文件。所以我的问题是：如何在传输过程中保持原始文件？ - Ng2-Fun

我们为什么需要 setInterval() 这个东西？ - jrub

Answer 2

看这个问题 Github - Request/Upload progress handling via @angular/http，Angular2 Http暂时不支持文件上传。

为了实现基本的文件上传，我使用Тимофей的答案创建了这样的服务函数：

  uploadFile(file:File):Promise<MyEntity> {
    return new Promise((resolve, reject) => {

        let xhr:XMLHttpRequest = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(<MyEntity>JSON.parse(xhr.response));
                } else {
                    reject(xhr.response);
                }
            }
        };

        xhr.open('POST', this.getServiceUrl(), true);

        let formData = new FormData();
        formData.append("file", file, file.name);
        xhr.send(formData);
    });
}

- Andrii Karaivanskyi

---

太好了！为了让它工作，我需要添加 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');。 - patad

谢谢！如果需要授权，将以下内容添加到xhr.open行后对我有用：xhr.setRequestHeader('Authorization', 'Bearer ' + __your_auth_key__); - Steve

现在支持这个吗？ - Manish Jain

@AndreyKarayvansky，有更新的链接吗？我得到了一个404页面，并且很难找到相关的问题。 - cbros2008

仍然没有来自Angular的支持 - https://github.com/angular/angular/issues/37597 - Kumaresan Sd

Answer 3

你的 HTTP 服务文件：

import { Injectable } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";
import {Observable} from 'rxjs/Rx';
import { Constants } from './constants';
declare var $: any;

@Injectable()
export class HttpClient {
  requestUrl: string;
  responseData: any;
  handleError: any;

  constructor(private router: Router, 
  private http: Http, 
  private constants: Constants, 
  ) {
    this.http = http;
  }

  postWithFile (url: string, postData: any, files: File[]) {

    let headers = new Headers();
    let formData:FormData = new FormData();
    formData.append('files', files[0], files[0].name);
    // For multiple files
    // for (let i = 0; i < files.length; i++) {
    //     formData.append(`files[]`, files[i], files[i].name);
    // }

    if(postData !=="" && postData !== undefined && postData !==null){
      for (var property in postData) {
          if (postData.hasOwnProperty(property)) {
              formData.append(property, postData[property]);
          }
      }
    }
    var returnReponse = new Promise((resolve, reject) => {
      this.http.post(this.constants.root_dir + url, formData, {
        headers: headers
      }).subscribe(
          res => {
            this.responseData = res.json();
            resolve(this.responseData);
          },
          error => {
            this.router.navigate(['/login']);
            reject(error);
          }
      );
    });
    return returnReponse;
  }
}

调用你的函数（组件文件）：

onChange(event) {
    let file = event.srcElement.files;
    let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example.
    this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => {
        console.log(result);
    });
}

你的HTML代码：

<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel">

- Bharat Chauhan

---

其中一个唯一使用Angular的答案。 - csga5000

我该如何修复这个 error TS2339: Property 'files' does not exist on type 'Element'. 谢谢。 - Muhammad Shahzad

onChange() {...} 应该改为 onChange(event) {...}，这样可以修复错误：property files does not exist ;) - Muhammad Shahzad

无法工作。它无法在使用 multer 的后端节点上找到文件。 - srv_sud

Answer 4

在我的项目中，我使用XMLHttpRequest发送multipart/form-data格式的数据。我认为这种方式也适合你。

还有上传器的代码。

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/rest/api', true);
xhr.withCredentials = true;
xhr.send(formData);

以下是示例：https://github.com/wangzilong/angular2-multipartForm

- Zilong Wang

---

仅仅链接到自己的库（或实用程序）并不是一个好的答案。链接到它，解释为什么它可以解决问题，提供使用它来解决问题的代码，并进行免责声明，这样会得到更好的答案。参见：如何以社区友好的方式链接到外部资源？ - Tunaki

Answer 5

首先，您需要创建自己的内联 TS-Class，因为FormData类目前支持不够好：

var data : {
  name: string;
  file: File;
} = {
  name: "Name",
  file: inputValue.files[0]
  };

然后您可以使用JSON.stringify(data)将其发送到服务器。

let opts: RequestOptions = new RequestOptions();
opts.method = RequestMethods.Post;
opts.headers = headers;
this.http.post(url,JSON.stringify(data),opts);

- Philip

---

支持其实并不差。如果上传的文件恰好是二进制文件或类似的东西，我想JSON.stringify可能会有一些问题... - csga5000