備忘録

備忘録

axiosを利用してファイルアップロード進捗を表示する方法

HTML JavaScript

Ⅰ. はじめに

タイトルの通り「axiosを利用してファイルアップロード進捗を表示する方法」です。

Ⅱ. 手順

1. サンプルファイルを用意する

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>

<body>
  <form id="form001">
    <input type="file" name="file">
    <input type="submit">
  </form>

  <progress id="progress001" value="0" max="100"></progress>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.2/axios.min.js"></script>
  <script>
    const progressElement = document.getElementById('progress001')

    document.getElementById('form001').addEventListener('submit', async event => {
      event.preventDefault()

      const options = {
        onUploadProgress: (event) => {
          const progress = Math.floor((event.loaded * 100) / event.total)
          progressElement.value = progress
        }
      }

      const response = await axios.postForm('https://bashupload.com/',
        document.getElementById('form001'),
        options
      )

      console.log(response.data)
    })
  </script>
</body>
</html>

実行結果

その他

gzipが利用されている場合は正しい進捗が表示されない
https://github.com/axios/axios/issues/2709