原生formdata上传-进度条读取

 

    // 上传图片

    load(obj) {

      var url = "URL"; // 接收上传文件的后台地址

 

      var form = new FormData(); // FormData 对象

      form.append("file", document.querySelector("[name=file]").files[0]); // 文件对象

      xhr = new XMLHttpRequest(); // XMLHttpRequest 对象

 

      xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。

      xhr.setRequestHeader(

        "Authorization",

        "Bearer " + token

      );

      xhr.onload = this.comlete; //请求完成

      xhr.upload.onprogress = this.progressFunction; //【上传进度调用方法实现】

      xhr.upload.onloadstart = function() {

        //上传开始执行方法

        var ot = new Date().getTime(); //设置上传开始时间

        var oloaded = 0; //设置上传开始时，以上传的文件大小为0

      };

      xhr.send(form); //开始上传，发送form数据

    },

 

    comlete(res) {

      console.log(res);
　　do soming....

    },

 

    // 读取进度条

    progressFunction(evt) {

      if (evt.lengthComputable) {

        let loading = Math.round((evt.loaded / evt.total) * 100);

　　console.log(loading)

      }

    },

<!-------------   音频信息  -------------------->

 

    computedTime: function(content) {

      //获取录音时长

      var url = URL.createObjectURL(content);

      //经测试，发现audio也可获取视频的时长

      var audioElement = new Audio(url);

      console.log(audioElement);

      let that = this;

      audioElement.addEventListener("loadedmetadata", function(_event) {

        that.duration = parseInt(audioElement.duration);

        that.chorusStart = parseInt(audioElement.duration);

        that.chorusEnd = parseInt(audioElement.duration);

      });

    },

　　<!---------- 调用获取指定元素信息  ---------------------------->
      this.computedTime(document.querySelector("[name=file]").files[0]);