Question

我有一个API（流明），它需要正文中的文件字段。

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

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

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

Answer 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);
        };   
    }

Answer 2

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

从Angular2 app上传文件到Lumen API

2 个答案: