原生JS上传文件

fileUpload(file){

    let xhr = new XMLHttpRequest();   //new一个XMLHttpRequest对象

    let formData = new FormData();    //new一个form表单，存储要传递的参数

    formData.append("file", file);    //将参数添加到form请求体中，file代表要上传的文件

    formData.append("id", "1");       //可添加多个参数

    xhr.open('POST',"localhost:8000/file/upload", true);  //第三个参数代表是否异步

    xhr.setRequestHeader("Authorization", "token");   //添加请求头token

    let totalProgress = 0;  //文件上传时的文件上传进度

    xhr.upload.onprogress = (e) => {

      //文件上传时的回调函数

      if(e.loaded){

        totalProgress = Math.floor((e.loaded * 100 ) / e.total);

      }

    }

    xhr.send(formData);   //发送请求

    xhr.onreadystatechange = (() => {

      //请求之后的回调函数

      if(xhr.readyState == 4 && xhr.status == 200){

        //当满足上传的条件为接口请求成功

        let res = JSON.parse(xhr.responseText);

        console.log(res)

        //res为接口返回信息

      }

    })

  }

 

/**以上内容为个人笔记，若有疑问，欢迎大家留言。*/