我正在开发一款Ionic 3应用程序。我需要在单个HTTP请求中上传图像文件，PDF文件和表单数据。
我也尝试过Cordova文件传输插件，但为此我必须调用多个请求（一个用于图像，一个用于PDF），我不想这样做。
我已经尝试了谷歌的每一个解决方案，但我找不到合适的解决方案，因为每个解决方案都是用于上传图像。
我使用PHP作为后端。请让我知道我在哪里犯了错误。
这是HTML
<form (ngSubmit)="submitLicence()" [formGroup]="licence" enctype="multipart/form-data">
<ion-list inset>
<ion-item>
<ion-label>Licence Type</ion-label>
<ion-input type="text" formControlName="licence_type" placeholder="Value"></ion-input>
</ion-item>
<ion-item>
<ion-label>State</ion-label>
<ion-input type="text" formControlName="state" placeholder="Value"></ion-input>
</ion-item>
<ion-item>
<ion-label>Year</ion-label>
<ion-input type="number" formControlName="year" placeholder="Value"></ion-input>
</ion-item>
<ion-item>
<ion-label>Select PDF</ion-label>
<ion-icon name="md-add-circle" item-end color="secondary" (click)="selectPDF()"></ion-icon>
</ion-item>
<ion-item>
<ion-label>Take a Photo</ion-label>
<ion-icon name="md-add-circle" item-end color="secondary" (click)="presentActionSheet()"></ion-icon>
</ion-item>
</ion-list>
<div padding>
<button ion-button type="submit" type="submit" [disabled]="!licence.valid" block>Submit</button>
</div>
</form>
这些功能适用于上传pdf。
selectPDF(){
this.fileChooser.open()
.then(uri =>
{(<any>window).FilePath.resolveNativePath(uri, (result) => {
let loaderPdf = this.loadingCtrl.create({
content: "Uploading PDF..."
});
loaderPdf.present();
// this.fd.append('doc',result);
this.testResponse = result;
this.nativepath = result;
this.readfile(loaderPdf);
})
})
.catch(e =>
this.testResponse = 'Error - '+e);
}
readfile(loaderPdf) {
(<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {
res.file((resFile) => {
var reader = new FileReader();
// reader.readAsArrayBuffer(resFile);
reader.onloadend = (evt: any) => {
loaderPdf.dismiss();
var src = evt.target.result;
src = src.split("base64,");
var contentAsBase64EncodedString = src[1];
var contentType = src[0].split(':');
this.testResponse = contentType[1].replace(';','');
contentType = JSON.stringify(contentType[1].replace(';',''));
var fileBlob = new Blob([evt.target.result], { type: contentType});
this.fd.append('doc',fileBlob,'doc');
//do what you want to do with the file
}
reader.readAsDataURL(resFile);
})
})
}
这些功能用于选择图像。
public presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Image Source',
buttons: [
{
text: 'Load from Library',
handler: () => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Use Camera',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
public takePicture(sourceType) {
let loaderImage = this.loadingCtrl.create({
content: "Uploading Image..."
});
loaderImage.present();
var options = {
quality: 100,
sourceType: sourceType,
saveToPhotoAlbum: false,
correctOrientation: true
};
// Get the data of an image
this.camera.getPicture(options).then((imageData) => {
// Special handling for Android library
this.base64Image = imageData;
this.readImage(loaderImage);
}, (err) => {
this.presentToast('Error while selecting image.');
});
}
readImage(loaderImage) {
(<any>window).resolveLocalFileSystemURL(this.base64Image, (res) => {
res.file((resFile) => {
var reader = new FileReader();
// reader.readAsArrayBuffer(resFile);
reader.onloadend = (evt: any) => {
var src = evt.target.result;
src = src.split("base64,");
var contentAsBase64EncodedString = src[1];
var contentType = src[0].split(':');
this.testResponse = contentType[1].replace(';','');
contentType = JSON.stringify(contentType[1].replace(';',''));
var imageBlob = new Blob([evt.target.result], { type: contentType});
loaderImage.dismiss();
this.fd.append('image',imageBlob,'image');
//do what you want to do with the file
}
reader.readAsDataURL(resFile);
})
})
}
最后，这个函数用于发布表单。
submitLicence(){
const licenceFormValue = JSON.stringify(this.licence.value);
let loader = this.loadingCtrl.create({
content: "Submitting form..."
});
loader.present();
var lt = this.licence.value.licence_type;
var st = this.licence.value.state;
var yr = this.licence.value.year;
this.fd.append('type',lt);
this.fd.append('state',st);
this.fd.append('year',yr);
this.fd.append('mode','createNewLicence');
this.testResponse = licenceFormValue;
let headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/json; charset=utf-8');
this.lic = this.httpClient.post('http://website.com/api.php',this.fd,{headers:headers});
this.lic.subscribe(data => {
loader.dismiss();
this.testResponse = JSON.stringify(data);
})
}
这是用于上传数据和图像的PHP脚本。
error_reporting(0);
date_default_timezone_set('GMT');
require_once './config/config_live.php';
include_once PATH_FRONT_LIBRARY . 'adodb5/adodb.inc.php';
include_once PATH_FRONT_LIBRARY . "ADODBClass_mysql.php";
include_once PATH_FRONT_LIBRARY_MAILER . "phpmailer/class.phpmailer.php";
include_once PATH_FRONT_LIBRARY_MAILER . "sendEmail.php";
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-
Disposition, Content-Description');
if ($_POST['json']) {
$data = json_decode($_POST['json'], true);
} else {
$jsonString = file_get_contents('php://input');
$jsonObj = json_decode($jsonString, true);
$data = $jsonObj;
}
if ($data["key"] == "difsfk") {
注意：我正在使用的PHP API由另一个人创建，我必须根据PHP代码编写离子代码。
答案 0 :(得分：0)
您是否尝试过离子原生http库
请关注链接：https://ionicframework.com/docs/native/http/
在正文中发送您的图像和文件数据以及其他参数。
post(url, body, headers)
例如：
let body = new FormData();
body.append(‘image’, imagedata);
body.append(‘pdf’, pdfdata);
body.append(‘desc’, “testing”);
this.http.post(“Your api endpoint”, body, options).subscribe(res => {
console.log(res);
});