Ionic 2で画像をアップロードするには

Question

Ionic 2とDjango Rest Frameworkでアプリを構築しています。私はギャラリーやカメラから写真を撮って、この写真を私のサーバーにアップロードする必要があります。

私はカメラを開いて写真を撮るこのコードを持っています。

options = {} 
Camera.getPicture(options).then((imageData) => { 
    // imageData is either a base64 encoded string or a file URI 
    // If it's base64: 
    let base64Image = "data:image/jpeg;base64," + imageData; 
}, (err) => { 
}); 

しかし、写真の保存場所やサーバーへの送信方法はわかりません。私はインターネット上で何も見つかりません。

おかげ

Answer 1

IONIC 2では、ギャラリーやカメラから（ソースタイプを変更して）画像を取得するために、このような操作を行います。それはbase64文字列形式のイメージを与えます。

pickPicture(){ 

    Camera.getPicture({ 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType  : Camera.PictureSourceType.PHOTOLIBRARY, 
     mediaType: Camera.MediaType.PICTURE 
    }).then((imageData) => { 
    // imageData is a base64 encoded string 
     this.base64Image = "data:image/jpeg;base64," + imageData; 
    }, (err) => { 
     console.log(err); 
    }); 
} 

このようなHTTPリクエストを使用して、このbase64文字列をサーバーに送信できます。

private http: Http 
this.http.post("http://localhost:3000", this.base64Image) 
          .map((res:Response) => res.json()) 
          .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 

サーバー側で受信した後、これをデコードして、このようにしてください。

Base64.decode64(image_data[:content]) 

私はそれが助けてくれることを願っています！

Answer 2

NOTE/EDIT：AngularJSのために、以前は角度として知られている場合は、このコード。私はgoogleの人々のためのショーケースを残し、Angular 1.xを検索する際につまずくだろう。ソリューション

RANT：。（角にAngular2を命名、AngularJSへと後角の1.xの名前を変更するの全体的なアイデアは、私が最近見た最もばかげたものの一つである1角度、2角度と4がAngular2とAngular4名前を付ける必要があります.Xは、図示のように、真としてオプションsaveToPhotoAlbumを設定してください暴言

例の）/最後は我々のアプリのいずれかで、作業コードで、私が何を意味するかのオプションで

$scope.takePicture = function(type) { 
      if (typeof(Camera) != 'undefined') { 
       var photoType = Camera.PictureSourceType.CAMERA; 
       if (type == 'gallery') { 
        photoType = Camera.PictureSourceType.SAVEDPHOTOALBUM; 
       } 
       var options = { 
        quality : 80, // Damir sa 75 
        destinationType : Camera.DestinationType.DATA_URL, 
        sourceType : photoType, 
        allowEdit : false, // Damir (true -> false) 
        encodingType: Camera.EncodingType.JPEG, 
        targetWidth: 625, //Damir sa 600 
        targetHeight: 800, //Damir sa 600 
        // popoverOptions: CameraPopoverOptions - Damir 
        saveToPhotoAlbum: false, 
        correctOrientation: true 
       }; 



       $cordovaCamera.getPicture(options).then(function(imageData) { 
         $scope.images.push({slikaB64:imageData,opis:null});    
        }, function(err) {    
         //alert(JSON.stringify(err)); 
        }); 
      } 
      else 
       $scope.images.push({slikaB64:"R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==",opis:'123'}) 
     } 

Answer 3

を説明すべきであるアンギュラ残っているはずです以下。

options = { 
saveToPhotoAlbum: true 
} 

（また、destinationTypeも変更できます）。

利用可能なオプションを表示するにはhereをご覧ください。

希望すると、これが役立ちます。ありがとう。

Answer 4

イメージをキャプチャして保存/キャッシュする方法です。

Camera.getPicture({ 
    destinationType: Camera.DestinationType.FILE_URI, 
    targetWidth: 1000, 
    targetHeight: 1000 
}).then((imageData) => { 
    this.image = imageData; 
}, (err) => { 
    console.log(err); 
}); 

直後に画像をアップロードする必要があります。

var url = "http://your_post_url/"; 
var targetPath = this.image; 
var filename = this.createUniqueFileName(); 
var options = { 
    fileKey: "file", 
    fileName: filename, 
    chunkedMode: false, 
    mimeType: "multipart/form-data", 
    params : { 
    "image": targetPath 
    } 
}; 
const fileTransfer = new Transfer(); 
fileTransfer.upload(targetPath, url, options).then(data => { 
    console.log(data); 
}, err => { 
    console.log(err); 
}); 

Answer 5

イオン2フレームワークを使用してサーバーに画像をアップロードするには、転送プラグインを使用する必要があります。

ionic plugin add cordova-plugin-file-transfer 
npm install --save @ionic-native/transfer 

を使用して転送プラグインをインストールしてから、転送クラスからアップロード機能を呼び出します。

const fileTransfer: TransferObject = this.transfer.create(); 

    let options1: FileUploadOptions = { 
    fileKey: 'file', 
    fileName: 'name.jpg', 
    headers: {} 

    } 

fileTransfer.upload(imageDataLocalURL, 'http://localhost/ionic/upload', options1) 
.then((data) => { 
// success 
alert("success"); 
}, (err) => { 
// error 
alert("error"+JSON.stringify(err)); 
}); 

私はこのコードは動作しませんイオン2を使用してい