开发中可能会涉及到需要展示文件上传进度条显示，方便用户知道文件的上传状态。其实进度条展示只需要拿到文件已上传的大小，和被上传文件的总大小即可。废话不多说直接上代码！！
class fileUpload extends XMLHttpRequest {xhr = null;file = {};upStatus = null;formData = null;constructor({ method, url, file }) {super();this.file = file;this.open(method, url, true);//一般情况下文件上传接口都需要token进行身份识别。this.setRequestHeader('token', storage.get("token"));this.formData = new FormData();this.formData.append('file', file);}on({ onProgress, onload, onerror }) {// 文件上传中持续触发this.upload.onprogress = (e) => {onProgress && onProgress(e, this.file);this.upStatus = e;// 分别能获取到文件已经上传大小，及被上传文件总大小。console.log(e.loaded,e.total) // loaded文件已上传大小，total文件总大小};// 文件上传结束触发this.onload = (e) => {onload && onload(e.target);};// 截获上传报错this.onerror = (error) => {console.log(error)};// 执行文件上传this.send(this.formData);return this;}}/** method:请求类型，url:文件上传的接口，file:上传的文件*/const fileTttp = new fileUpload({ method: 'POST', url, file });fileTttp.on({onProgress: (e, file) => {console.log(`${(e.loaded/e.total)*100}%`) // 文件上传进度},onload: (data) => {console.log(data,'你的文件上传完毕了！')},onerror: (error) => {console.log(error,'你的文件上传出错了！')}});
