监听 AJAX 请求进度

AJAX已经对 AJAX 有了初步的了解。

通过监听 XHR(XMLHttpRequest)的 progress 事件，可以获取请求的已发送数据量和总数据量。

progress 事件

测试:

总大小: 0

已上传: 0

进度: 0%

代码:

<template>
总大小: <span id="total">0</span>

已上传: <span id="loaded">0</span>

进度: <span id="progress">0</span>%

<input type="file" id="file" />
<el-button type="primary" id="upload" @click="testProgress">开始上传</el-button>
</template>

<script setup>
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

const xhr = new XMLHttpRequest();

const testProgress=()=>{
  document.querySelector('#progress').innerHTML=0
  const file = document.querySelector("#file").files;
  const formData = new FormData();
  formData.append("file", file[0]);
  xhr.open("POST", "http://localhost:3000/upload", true);
  xhr.upload.onprogress = (progress)=> { 
    document.querySelector('#total').innerHTML=progress.total
    if (progress.lengthComputable) {
      const percent = Math.floor(progress.loaded / progress.total * 100);
      document.querySelector('#loaded').innerHTML=progress.loaded
      document.querySelector('#progress').innerHTML=percent
    }
  };
  xhr.send(formData);
}
</script>

abort中止请求

调用XHR实例的abort方法可以中止当前实例的请求，然后readyState会重置为0(UNSENT)。

测试:

总大小: 0

已上传: 0

进度: 0%

代码:

<template>
总大小: <span id="total">0</span>

已上传: <span id="loaded">0</span>

进度: <span id="progress">0</span>%

<input type="file" id="file" />
<el-button type="primary" id="upload" @click="testProgress">开始上传</el-button>
<el-button type="primary" @click="xhr.abort()">停止上传</el-button>
</template>

<script setup>
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

const xhr = new XMLHttpRequest();

const testProgress=()=>{
  document.querySelector('#progress').innerHTML=0
  const file = document.querySelector("#file").files;
  const formData = new FormData();
  formData.append("file", file[0]);
  xhr.open("POST", "http://localhost:3000/upload", true);
  xhr.upload.onprogress = (progress)=> { 
    document.querySelector('#total').innerHTML=progress.total
    if (progress.lengthComputable) {
      const percent = Math.floor(progress.loaded / progress.total * 100);
      document.querySelector('#loaded').innerHTML=progress.loaded
      document.querySelector('#progress').innerHTML=percent
    }
  };
  xhr.send(formData);
}
</script>