我创建了一个带有文件/图像上传选项的离子应用程序(版本3.9.2)。 它可以在模拟器上运行,文件可以毫无问题地上传到服务器上。构建后,apk图像/文件未上传。最初它在模拟器和apk上都可以运行,但现在在实际设备上不起作用。
home.html
<ion-col col-4>
<button ion-button color="danger" type="button" round (click)="takePhoto()">
<ion-icon name="camera"></ion-icon>
</button>
</ion-col>
<ion-col col-4>
<button ion-button round (click)="submit()" block>Submit</button>
</ion-col>
<ion-col col-4>
<button ion-button color="secondary" type="button" round (click)="selectPhoto()">
<ion-icon name="image"></ion-icon>
</button>
</ion-col>
home.ts
takePhoto() {
this.camera.getPicture({
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.CAMERA,
encodingType: this.camera.EncodingType.PNG,
saveToPhotoAlbum: false
}).then(imageData => {
this.myPhoto = imageData;
this.error='';
}, error => {
this.error = JSON.stringify(error);
});
}
selectPhoto(): void {
this.camera.getPicture({
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,
quality: 100,
encodingType: this.camera.EncodingType.PNG,
}).then(imageData => {
this.myPhoto = imageData;
this.error='';
}, error => {
this.error = JSON.stringify(error);
});
}
submit() {
var fd = new FormData();
fd.append('userId',this.userId)
if (this.myPhoto != null) {
this.file.resolveLocalFilesystemUrl(this.myPhoto)
.then(entry => (<FileEntry>entry).file(file =>
{
const reader = new FileReader();
reader.onloadend = () => {
const imgBlob = new Blob([reader.result], { type: file.type });
fd.append('profilefileAttachment', imgBlob, file.name);
};
reader.readAsArrayBuffer(file);
}
))
.catch(err => console.log(err)
);
}
//API call
this.authService.imageUpload(fd).subscribe((result:any)=>{
},
(err) => {
this.presentToast(err);
})
}
auth-service.ts
imageUpload(Data:any)
{
return this.httpClient.post('/home/upload', Data)
}