2017-12-31 8 views
0

Ich folgte einem der Tutorial von @Simon_Grimm Blogs. Es ist ein einfaches ionisches Bild, das auf Node.js hochgeladen wird. Alles funktioniert perfekt außer dem Upload. Ich kann Bilder vom Server in meinen Ionic Client anzeigen, die ich auch löschen kann. Meine HTTP-Anfrage zum Löschen und Abrufen von Bildern funktioniert einwandfrei. Nur wenn ich auf den Upload-Button klicke, kann er nicht mit meinem Backend kommunizieren. Es füllte den Fehler wo httpStatus = null, Körper = null usw. Ich konnte nicht verstehen, warum nicht funktioniert? Zum Hochladen von Dateien auf die native Dateiübertragung. Soweit ich kann, ist mein Problem, dass meine Upload-Methode die HTTP-Anfrage nicht auslösen konnte. Ich würde mich freuen, wenn mir bitte jemand helfen könnte.Ionic-3 Image Upload mit FileTransfer Native zu NodeJs Server

Mein Bild-Upload serveice Anbieter ist

Bild-Upload-setting.ts, hier ist mein uploadMethod. Mein Fehler bei diesem return filetransfer callback (err)=>

import { Injectable } from '@angular/core'; 
import 'rxjs/Rx'; 
import {Http, Response} from "@angular/http"; 
import { Observable } from 'rxjs/Rx'; 
import { Headers } from '@angular/http'; 
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer'; 
import { File } from '@ionic-native/file'; 


@Injectable() 
export class ImageUploadSettingsProvider { 

    constructor(private http: Http, private transfer: FileTransfer, private file: File) { 
    console.log('Hello ImageUploadSettingsProvider Provider'); 


    } 



    imageUpload(imageData, desc){ 
    let requestUrl = 'http://localhost:5000/images/'+ 'upload'; 
    var destination = imageData; 

    var options: FileUploadOptions = { 
      fileKey: 'file', 
      chunkedMode: true, 
      mimeType: 'multipart/form-data', 
      params: { 'desc': desc } 
    }; 
    const fileTransfer: FileTransferObject = this.transfer.create(); 
    return fileTransfer.upload(destination,requestUrl,options).then(
     (data)=>{ 
      console.log('ImageProvider Upload Data-',data); 
     }, 
     (err)=>{ 
      console.log(err); 
     } 
    ) 

    }; 



} 

Sein ausgelöst wurde bedeutet, dass mein uploadMethod successfull .then((data)=>{}) nicht funktioniert.

Mein html.ts ist

onSubmit(form: NgForm){ 
    this.imageProvider.imageUpload(this.imageUrl, form.value.desc).then(
    (res)=>{ 
     form.reset(); 
    }, 
    (err)=>{ 
     console.log(err); 
    } 
); 
}; 


onTakePhoto(){ 

     const options: CameraOptions = { 
       quality: 100, 
       encodingType: this.camera.EncodingType.JPEG, 
       correctOrientation: true, 
       allowEdit: true, 
       destinationType: this.camera.DestinationType.FILE_URI, 
       mediaType: this.camera.MediaType.PICTURE, 
       sourceType: this.camera.PictureSourceType.CAMERA, 
      } 

     this.camera.getPicture(options).then((imageData)=>{ 


/* 
      let base64Image = 'data:image/jpeg;base64,' + imageData; 
      this.imageUrl = base64Image */ 


     this.imageUrl = imageData; 


    }, (err) => { 
      const toast = this.toastCtr.create({ 
       message:'Could Not save the image. Please try again', 
       duration:2500 
      }); 
      toast.present(); 
      this.camera.cleanup(); 
     }); 

} 

Ich versuchte, das Formiat zu Base64 zu ändern. Leider klappt es nicht so gut. Dann bemerke ich es auskommentieren. Jetzt ziehe ich meine Haare seit 1 Woche.

Vielen Dank für Ihre Mühe

Antwort

0

In ImageUploadSettingsProvider, versuchen Sie dies für die Antwort

mimeType: 'multipart/form-data', 

dieser

mimeType: "image/jpg", 
+0

Hallo @Sherif_Abdulmawala, Dank zu ändern. Aber ich sende Datei als Formulardaten. Wenn ich nur ein Bild sende, muss ich Format wie base64 Image Format behandeln. Diese Lösung hat mir nicht geholfen. Ich habe mich schon verändert. Es löst meine HTTP-Anfrage nicht aus. – Garten786