upload.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上传</title>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
  </head>
  <body>
    <input type="file" accept="image/*" id="fileEle" />
    <button id="uploadBtn" onclick="uploadFile()">上传</button>
    <script>
      const request = axios.create({
        baseURL: "http://localhost:3000/upload",
        timeout: 60000,
      });
      const fileEle = document.getElementById("fileEle");
      console.log(fileEle);

      function uploadFile() {
        if (!fileEle.files.length) return;
        const file = fileEle.files[0]; // 获取单个文件
        // 省略文件的校验过程，比如文件类型、大小校验
        upload({
          url: "/single",
          file,
        });
      }

      function upload({ url, file, fieldName = "file" }) {
        let formData = new FormData();
        formData.set(fieldName, file);
        request.post(url, formData, {
          // 监听上传进度
          onUploadProgress: function (progressEvent) {
            const percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            console.log(percentCompleted);
          },
        });
      }
    </script>
  </body>
</html>