2016-09-26 8 views
3

Ionic/Cordova App、javascriptから画像をWeb apiに投稿する問題に直面しています。 IはlinkJavascript(Http Request)のFormDataにファイルイメージを追加します。

以下のリンクを参照。これは私のコードである:

$http({ 
         method: "POST", 
         url: url, 
          headers: { 
          //'Content-Type': 'multipart/form-data', 
          //'Content-Type': false, 
          //'Content-Type': undefined, 
          'Cache-Control': 'no-cache', 
          'DevicePassword': localStorage.getItem("UserPassword"), 
          'UserName': 'thuong' 
          }, 
          transformRequest: function (data) { 
          var formData = new FormData(); 
          formData.append("data", angular.toJson(data.data)); 
          alert("sizeofImg: " + data.files.length); 

          for (var i = 0; i < data.files.length; i++) { 
           alert(data.files[i].ImgSrc); 
           var blob = dataURItoBlob(data.files[i].ImgSrc); 
           //var file = new File([blob], "file.png",{type: 'image/png'); 
           formData.append("file" + i, blob, "filename" + i + "png"); 
          } 
          return formData; 
          }, 
          data: { data: jsonData, files: files } 
          }) 
      .then(function (result) { 
        alert("success" + result); 
        success(result); 
      }, 
        function (error) { 
        alert("error" + JSON.stringify(error)); 
        failure(error); 
        } 
      ); 

function dataURItoBlob(dataURI) { 
// convert base64/URLEncoded data component to raw binary data held in a string 
var byteString; 
if (dataURI.split(',')[0].indexOf('base64') >= 0) 
    byteString = atob(dataURI.split(',')[1]); 
else 
    byteString = unescape(dataURI.split(',')[1]); 

// separate out the mime component 
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

// write the bytes of the string to a typed array 
var ia = new Uint8Array(byteString.length); 
for (var i = 0; i < byteString.length; i++) { 
    ia[i] = byteString.charCodeAt(i); 
} 

return new Blob([ia], {type:mimeString}); 

}そこに

、data.files [i]は.ImgSrcはBase64文字列です。 (私はそれを得るためにCordova Camera Pluginを使用しました) data:image/png; base64、... ステータスコード:415(UnsupportMediaFile).I上記のようなサーバー側の実装。 dataURIToBlobメソッドは正しいですか? 私を助けてください。

答えて

1

アペンドアップロードファイルコードブ​​ロー

$scope.updateProfile = function(form_data){ 
     console.log(form_data); 
     $scope.submitted = true; 
     $scope.reg = form_data; 
     var fd = new FormData(); 
     var file = $scope.fileToUpload; 
     fd.append('file',file); 
     $http.post(API_URL+"user_update_profile", fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
      }) 
      .success(function(res){ 
       console.log(res); 
      }) 
      .error(function(err){ 
       console.log(err); 
      }); 
    } 

参照してください。注:fileToUpload変数は、私が唯一のbase64で文字列を持っているファイル属性

var file = $scope.fileToUpload; 
    fd.append('file',file); 
+0

で、私はコンポーネントのを使用していけませんの。そして、$ scope.fileToUploadはどこですか? –

+0

ファイル属性コードを使用する上記のコードは、このファイル属性をbase64文字列なしで適用することができます。 –

+0

申し訳ありません。私は入力タグを使用しない、私の仕事はカメラのプラグインから画像を取得するためです。だから私はベース64しか持っていません。BLOBに変換しました。今はそれを公開する方法がわかりません。 –

関連する問題