Ionic framework 如何使用http.post上载文件和表单数据

我正在使用

http.post

提交一份包含

title

和

description

等字段的表单，效果很好。我还允许用户使用相机拍摄照片，并将其保存为

base64

格式的字符串。我需要通过相同的POST请求将此照片提交到服务器。我该怎么做？到目前为止，我的代码如下，服务器在名为“photo”的字段中查找上传的照片：

---

你必须使用文件传输插件上传文件。我建议使用file而不是base64。当以高分辨率捕获图像时，Base64是非常大的字符串

html 您可以使用以下功能向服务器发送数据

uploadData()
{
    this.disabledButton = true;
    this.commonProvider.retrieve('userData').then(res=>{ 

        const fileTransfer: TransferObject = this.transfer.create();
        var options = {
            fileKey: "file",
            fileName: "filename",
            chunkedMode: false,
            mimeType: "multipart/form-data",
            params : {
                "methodName": "saveBodyUpdate",
                "challenge_id": this.challenge_id,
                "userId": res['user_id'],
                "loginToken": res['loginToken'],
                "days_id":"1",
                "weight": this.myweight
            }
        };  
        fileTransfer.onProgress((e)=>
        {
            this.prg=(e.lengthComputable) ?  Math.round((e.loaded * 100) / e.total) : -1; 
            this.changeDetectorRef.detectChanges();
        });
        fileTransfer.upload(this.imgSrcData, this.apiUrl, options).then((res) => 
        {   
            console.log(JSON.stringify(res));
            this.viewCtrl.dismiss();
        },(err)=> {
            this.viewCtrl.dismiss();
        });
    })  
}

这可能会有帮助：（我在后端使用了nodejs和mongodb）

HTML:：

<input type=“file” name=“image” accept=“image/*” (change)=“changeListener($event)”>

imagesProvider.ts：

test1(data){
 var options = {};
let body = new FormData();
body.append(‘image’, data);
body.append(‘desc’, “testing”);
this.http.post(“Your api endpoint”, body, options).subscribe(res => {
console.log(res);
});
}

---

我想使用POST请求提交照片。您只需要通过base64进行POST吗？不，在

camera中定义的任何类型。DestinationType

是可接受的（数据URL、文件URI、本机URI）。您只能通过摄像头捕获图像。你的

http.post

方法在哪里？我想您忘了显示驻留在

UploadBodyImagePage

页面中的代码。谢谢，但它只绑定到一个文件。如果我想通过同一个呼叫上传两个或多个文件怎么办？

uploadData()
{
    this.disabledButton = true;
    this.commonProvider.retrieve('userData').then(res=>{ 

        const fileTransfer: TransferObject = this.transfer.create();
        var options = {
            fileKey: "file",
            fileName: "filename",
            chunkedMode: false,
            mimeType: "multipart/form-data",
            params : {
                "methodName": "saveBodyUpdate",
                "challenge_id": this.challenge_id,
                "userId": res['user_id'],
                "loginToken": res['loginToken'],
                "days_id":"1",
                "weight": this.myweight
            }
        };  
        fileTransfer.onProgress((e)=>
        {
            this.prg=(e.lengthComputable) ?  Math.round((e.loaded * 100) / e.total) : -1; 
            this.changeDetectorRef.detectChanges();
        });
        fileTransfer.upload(this.imgSrcData, this.apiUrl, options).then((res) => 
        {   
            console.log(JSON.stringify(res));
            this.viewCtrl.dismiss();
        },(err)=> {
            this.viewCtrl.dismiss();
        });
    })  
}

<input type=“file” name=“image” accept=“image/*” (change)=“changeListener($event)”>

file: File;
changeListener($event): void {
this.file = $event.target.files[0];
this.imagesProvider.test1(this.file) // Calls test1() function in imagesProvider.ts
}

test1(data){
 var options = {};
let body = new FormData();
body.append(‘image’, data);
body.append(‘desc’, “testing”);
this.http.post(“Your api endpoint”, body, options).subscribe(res => {
console.log(res);
});
}