前端笔记之js/ts 文件上传服务

没事记记笔记，省得以后用到还得忘了还得百度。话不多说直接上代码：
js版本

/**
 * @param file 文件
 */
function importPlan(event) {
  const request = new XMLHttpRequest();
  const fileList = event.target.files;
  if (fileList.length > 0) {
    return new Promise((resolve, reject) => {
      const file = fileList[0];
      const formData = new FormData();
      formData.append('file', file);
      request.open('POST', '上传路径');
      request.send(formData);
      // tslint:disable-next-line: only-arrow-functions
      request.onreadystatechange = function() {
        // readyState:
          // 0: 请求未初始化
          // 1: 服务器连接已建立
          // 2: 请求已接收
          // 3: 请求处理中
          // 4: 请求已完成，且响应已就绪
        // status:
          // 200: 'ok'
          // 404: 未找到页面或接口
        // xhr.responseText: 后端返回的数据
        if (request.readyState === 4 && request.status === 200) {
          return resolve(request.response);
        }
      };
    });
  }
}

ts版本

/**
 * @param file 文件
 */
  importPlan(event) {
      const request = new XMLHttpRequest();
      const fileList: FileList = event.target.files;
      if (fileList.length > 0) {
          return new Promise((resolve, reject) => {
              const file: File = fileList[0];
              const formData: FormData = new FormData();
              formData.append('file', file);
              request.open('POST', ’上传路径‘);
              request.send(formData);
              // tslint:disable-next-line: only-arrow-functions
              request.onreadystatechange = function() {
                  // readyState:
                      // 0: 请求未初始化
                      // 1: 服务器连接已建立
                      // 2: 请求已接收
                      // 3: 请求处理中
                      // 4: 请求已完成，且响应已就绪
                  // status:
                      // 200: 'ok'
                      // 404: 未找到页面或接口
                  // xhr.responseText: 后端返回的数据
                  if (request.readyState == 4 && request.status == 200) {
                      return resolve(request.response);
                  }
              };
          });
      }
  }

两者只在细微处有区别，调用这个方法的时候一定要有异步调用，如下：

handlePromise = async () =>{
    let getValue  = await this.importPlan();  // 异步获取 Promise  抛出的状态值
    console.log('Promise 的状态值： ',getValue.value);
};