☰

Axios のフォームからファイルを投稿する方法 質問する

tag-icon • tag-icon javascript ajax file-upload axios
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 経由で送信されたファイル オブジェクトを取得するにはどうすればよいですか?

ベストアンサー1

ファイルを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'
    }
})

おすすめ記事