2016-11-18 6 views
-1

私はユーザー入力をアップロードするための簡単なAngularフォームを作成しようとしています。ステップの1つは、画像を選択することである。私は、サーバーにアップロードする前に、リモートソースからイメージを取得しようとしています。コードを実行するとonload()からメソッドを呼び出そうとしましたが、メソッドはサポートされていません。

app.controller('submissionFormController', function ($http) { 
this.formIsVisible = false; 
... 
this.sub = { //this Object contains the data entered into the form 
      }; 

this.uploadImage = function(img){ 
    this.sub.imgfile = img; 
}; 

this.downloadImage = function() { 
    url = this.sub.imgurl; 
    var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0]; 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 

    xhr.onload = function() { 
     this.uploadImage(xhr.response); 
     console.log("Image fetched!"); 
    }; 

    xhr.open('GET', url); 
    xhr.send(); 
}; 
}); 

、私は次のエラーを取得する:

Object doesn't support property or method 'uploadImage'

+0

@trincotでより多くの情報を見つけることができます*それを修正する方法*。私はこれを重複としてクローズすることが現時点で正しいコースであるとは確信していません。答えを開いたままにしておくと、同じ問題を経験している人を助けるでしょう。 – UrhoKarila

+0

多くの方法があります。これは一つです: 'xhr.onload = function(){ ...} .bind(this);'。 – trincot

+0

ありがとう、それはトリックでした!私はまだ私の以前の主張によって立っている - しかし、この質問は重複としてマークされるべきではなく、あなたのコメントは本当に[回答があったはずです](http://meta.stackoverflow.com/a/297069/1673882) 。 – UrhoKarila

答えて

0

は多くの方法が出ています。ここでは1です:

xhr.onload = function() { ... }.bind(this); 

あなたはリンク質問が*間違って何が起こっているのか私に*の良いアイデアを与えるが、それは特に簡潔なアイデアを与えるものではありません。このquestion & answer

関連する問題