2017-12-31 155 views
0

@Simon_Grimmのブログのチュートリアルの1つに続きました。 Node.jsへの簡単なイオン画像のアップロードです。アップロード以外はすべて完全に機能しています。私はサーバーから私のイオンクライアントに画像を表示することができます、私は同様に削除することができます。削除と画像取得に関する私のHTTPリクエストは完全に機能しています。アップロードボタンをクリックするたびに、バックエンドと通信することはできません。 http_status = null、body = nullなどのエラーが発生しました。なぜ動作しないのか理解できませんでしたか?ファイルのネイティブ転送へのアップロード。限り、私の問題を落とすことができます、何とか私のアップロードメソッドは、HTTP要求をトリガすることはできませんでした。 誰かが私を導くことができたら嬉しいです。Ionic-3 ImageTransferをNodeJsサーバーにネイティブでアップロードする

マイ画像アップロードserveiceプロバイダは、ここでは、

画像アップロード-setting.tsである私のuploadMethodです。私のエラーは、この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); 
     } 
    ) 

    }; 



} 

その時にトリガされた私のuploadMethod successfull .then((data)=>{})が動作しないことを意味します。

私html.tsは、私はBASE64にギを変更しようとしました

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

} 

です。残念ながら、それはうまく動作しません。それからコメントを外します。今私は1週間以来私の髪を引っ張っている。

ImageUploadSettingsProviderであなたの努力

答えて

0

ためのおかげで、この

mimeType: "image/jpg", 
+0

こんにちは@Sherif_Abdulmawalaにこの

mimeType: 'multipart/form-data', 

を変更してみてください、返信用 感謝。しかし、フォームデータとしてファイルを送信しています。私がimageだけを送るのであれば、base64 Image Formateのようなフォーマットを扱わなければなりません。この解決法は私を助けませんでした。私はすでに変わった。それは私のhttp要求を引き起こさない。 – Garten786

関連する問題