使用Ajax封装上传文件的方法

概要

封装一个文件上传的方法需要考虑：
1.函数需要接受文件作为数据
2.接收一个成功回调
3.显示加载进度
4.支持取消上传

代码奉上

// 定义一个上传函数，用于上传文件
function upload(file, onFinish, onProgress) {
  // 创建一个新的XMLHttpRequest对象
  const xhr = new XMLHttpRequest();
  // 加载完成后，执行onFinish函数，将返回的数据解析为JSON格式
  xhr.onload = function () {
    onFinish(JSON.parse(xhr.responseText));
  };
  // 上传过程中，会不断执行onProgress函数，将上传的进度传给onProgress函数
  xhr.upload.onprogress = (e) => {
    // e.loaded 当前已上传的文件大小
    // e.total 当前文件总大小
    const percent = Math.floor((e.loaded / e.total) * 100);
    onProgress(percent);
  };

  // 打开一个新的POST请求，上传文件
  xhr.open("POST", 'http"//xxxxx');
  // 创建一个新的FormData对象
  const form = new FormData();
  // 将文件添加到FormData对象中
  form.append("file", file);
  // 发送FormData对象
  xhr.send(form);

  // 返回一个函数，用于取消上传
  return function () {
    xhr.abort();
  };
}

结论