Angular 2 图片上传损坏

Question

我在 Angular2 中创建了以下用于将文件上传到服务器的服务：

import { Component } from '@angular/core';
import { Http, Response, Headers, RequestOptionsArgs } from '@angular/http'
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class UploadService {
    constructor(private http: Http) {
    }

    public upload(url: string, file: File, type: string): Observable<Response>{
        let formData: FormData = new FormData()
        formData.append("uploadFile", file);
        let headers = new Headers(); 
        headers.append('Content-Type', type);
        let opts:RequestOptionsArgs = { headers: headers };
        return this.http.put(url, formData, opts)
    }
}

它适用于大多数数据类型，除了我遇到一个奇怪的问题，对于图像，它在文件顶部添加了以下 header：

------WebKitFormBoundaryUmPd3GQyQ1XQfCFv Content-Disposition: form-data;名字="uploadFile";文件名="Picture_Lotus-01.jpg" Content-Type: image/jpeg

除此之外，所有数据均已正确上传；即如果我然后下载文件并删除那些 header 行图像是可读的。我已经用 Postman 测试了上传，它工作正常，因此我相信这是我在我的 angular2 上传中配置 header 信息的方式。帮助！！我已经为此苦恼了一整天了！

Answer 1

这是 multipart/form-data 的标准，我需要一个足够的服务器端解析器。

Angular 2 图片上传损坏

Angular 2 Image Upload Corruption

file-upload

image-uploading

angular2-forms

angular