从Angular2 app上传文件到Lumen API

发布时间：2020-12-17 17:17:08 所属栏目：安全来源：网络整理

导读：我有一个API(流明),它需要一个文件字段在正文中. 使用Postman,我只需将文件解析为API,然后Lumen将其保存在服务器上. 但是如何使用Angular2将文件上传到API？目前我正在使用HTTP来进行后期请求. this.http.post(ENDPOINT,body,options)..... 解决方法请尝试

我有一个API(流明),它需要一个文件字段在正文中.

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

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

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

解决方法

请尝试以下方法.

模板：

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

希望它会有所帮助.

更新：

there is a “angular-way” to do it with the 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);
        };   
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!