[解決済み】Axiosでフォームからファイルを投稿する方法

質問

以下の方法でflaskサーバーにファイルをポストすると、生のHTMLを使用して、flaskのリクエストグローバルからファイルにアクセスできます。

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

フラスコでは

def post(self):
    if 'file' in request.files:
        ....

Axiosで同じことをしようとすると、flaskのリクエストグローバルが空になってしまいます。

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
}

上記と同じ uploadFile 関数を使用し、axios.post メソッドからヘッダー json を削除すると、flask リクエストオブジェクトのフォームキーに文字列値の csv リスト（ファイルは .csv ）が取得されます。

axios経由で送信されたファイルオブジェクトを取得するにはどうすればよいですか？

解決方法は？

ファイルを formData オブジェクトを作成し Content-Type ヘッダーを multipart/form-data .

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})