从 Angular2 应用程序上传文件到 Lumen API答案

【问题标题】：Upload a file to Lumen API from Angular2 app从 Angular2 应用程序上传文件到 Lumen API
【发布时间】：2016-09-06 17:34:25
【问题描述】：

我有一个 API (Lumen)，它需要正文中的文件字段。

使用 Postman，我只需将文件解析到 API，然后 Lumen 将其保存在服务器上。

但是如何使用 Angular2 将文件上传到 API？目前我正在使用 HTTP 进行后期请求。

this.http.post(ENDPOINT, body, options).....

【问题讨论】：

我想帮助你，但有时间理解这个问题。你能尝试清除拼写并添加一些代码示例吗？来自 Postman 的请求信息将是一个很好的开始！
@MaartenBicknese 也许你现在可以理解了？只想将文件从我的 angular2 应用程序上传到 lumen api...
这并没有太大帮助。我敦促您阅读stackoverflow.com/help/how-to-ask 和stackoverflow.com/help/mcve。
嗨 Rakete，您究竟想如何从您的 Angular 应用程序传递文件？您是否希望在用户选择文件并将文件上传到的页面上有一个文件输入元素服务器？

标签： angular lumen

【解决方案1】：

试试下面的。

模板：

<input type="file" 
        id="file"
        (change)="onInputFile($event)">

代码：

onInputFile(event){
    let file = event.target.files[0];

    uploadFile(file).then(
       (res:any) => { console.log(res);},
       (error:any) => { console.log(error);}
    )
}

uploadFile(file, url) {
    return new Promise((success, reject) => {
        let formData = new FormData();
        formData.append('myFile', file);

        let xhr = new XMLHttpRequest();

        xhr.onload = function(){
            if(this.status == 200){
                success(this.response);
            } else {
                reject(this.statusText);
            }
        }

        xhr.onerror = function(){
            reject(this.statusText);
        }

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

希望它会有所帮助。

更新：

有一种“角度方式”可以用 http-class 来做到这一点......

Angular2 文档说：POST 正文实际上必须是一个字符串。您可以尝试将文件转换为 base64 并发布。

uploadFile(file, url){
        let req = this.http;
        let reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = function() {
            req.post(url, reader.result).toPromise();
        };

        reader.onerror = function(error) {
            console.log('Error: ', error);
        };   
    }

【讨论】：

是的，这行得通。这就是我目前的做法。但我希望有一种“角度方式”来使用 http-class...

【解决方案2】：

内容标头类型请求存在问题，但现在已解决。您可以在此处参考这些链接 Github - https://github.com/angular/http/issues/69
和 https://github.com/angular/angular/pull/7310/files

【讨论】：

你能给出一个小的代码示例吗？有没有可能因为这个特性将文件传递给 http.post() 函数？