<image src>タグの画像をjavascriptにアップロードするには？

Question

私は以下のようにウェブページ上にイメージタグを持っています。

<image src='http://xxxxxx.jpg'/> 

今、私はそのイメージを取得し、javascriptのリモートhttpサーバーにアップロードします。 イメージURLの値は、http API呼び出しからのjavascriptで定義された変数です。その画像を以下のようなリモートサーバにアップロードしたいと思います。この場合、どのように 'HOW_TO_SET_THIS_VALUE'に値を設定できますか？この後

axios({ 
    url: backendServerAddress + '/user/upload_photo', 
    method: 'post', 
    timeout: 30000, 
    headers: { 
     'ACCESS_TOKEN': token 
    }, 
    data: HOW_TO_SET_THIS_VALUE, 
    }).then(response => { 
    console.log('update photo response '+ response) 

    }).catch(response=>{ 
    console.log('failed to upload photo') 

    }) 

Answer 1

var filedata = document.getElementById('#IdOfYourFileInputElement').files[0]; 

var formData = new FormData(); 
formData.append('name_offile_field_of_your_choice',filedata); 
formData.append('some_field_other_than_file',valueOfThatField); 

var HOW_TO_SET_THIS_VALUE = formData; 

、サーバー側では、その後 を行っているとしてPHP

$_Files['name_offile_field_of_your_choice] 
$_POST['some_field_other_than_file]