OSS直传，带进度条

效果图

前言

使用原生Input上传大文件（视频）页面会卡死，所以决定使用Element-ui的Upload组件完成。

<el-upload class="upload-demo" v-if="!pageStatue" :multiple="true" name="1"  :http-request="Upload1" action="文件路径" :show-file-list="false">
    <!-- 这里使用 :http-request 自定义上传方法 -->
    <span class="icon iconfont icon-weibiaoti-_shangchuan upload_icon"></span>
</el-upload>

Upload组件入口

正文

// 自定义上传
Upload1(file,num) {
  this.filename = file.filename;
  // 验证
  let files= file.file;
  let fileName=files.name;
  let fileSize=files.size;
  let fileType=files.type;
  var file_type= fileName.split('.').pop();
  file_type = file_type.toLowerCase();
  if(file_type == 'png' || file_type == 'jpg' || file_type == 'jpeg'){
    
  }else {
    alert('只能上传jpg、png、jpeg');
    return false;
  }

  let pro = new Promise((resolve, rej) => {
    //获取签名
    axios.get(baseURL + "/sys/newOss/findSing").then( (res) => {
      resolve(res.data);
    })
  });

  pro.then( success => {
    // 第一次上传
    if(num != 2) {
      // 保存上传的文件
      this.imgactiveList1.push(file);
      // 当前上传的进度文件
      this.imgactiveList.push({
        imgName :file.file.name,
        videoUploadPercent: 0, //进度数字
        type: "imgList" //页面为多个上传，作为上传后Push进那个数组
      })
    }
    if(this.imgactiveList1.length == 1 ) {
              // 第一次上传调用
              this.fileUpload(success,file,file.filename);
              return false;
            }
            // 判断第二次调用时 是否是undefined
            if(this.imgactiveList1[this.imgactiveNum] == undefined) {
              return false;
            }
            // 第二次、第N次上传
            if(this.imgList.length >= 1 || this.imgactiveList.length == 1) {
              this.fileUpload(success,this.imgactiveList1[this.imgactiveNum],file.filename);
            }

          })
      }

fileUpload(success,file,filename) {
var json = success;
var ossData = new FormData();
var date = new Date();
var s = date.getTime();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();

 // 添加配置参数
 ossData.append('OSSAccessKeyId', json.accessid);
 ossData.append('policy', json.policy);
 ossData.append('Signature', json.signature);
 ossData.append(
  "key",
  json.dir + "/" + y + "/" + m + "/" + d + "/" + s +'.'+file.file.name.split('.').pop()
);
 ossData.append('success_action_status', 201); // 指定返回的状态码
 ossData.append('file', file.file, file.file.name);

this.xhr.open("post", json.host, true);          
//调用方法监听上传进度
this.xhr.upload.addEventListener(
  "progress",
  this.progressFunction,
  false
); 

this.xhr.onload = (data) => {
  var data = this.toXmlDom(data.currentTarget.response)
  if ($(data).find('PostResponse')) {
      var res = $(data).find('PostResponse');
      this.imgactiveList.splice(0,1)
      if(this.imgactiveNum >= this.imgactiveList1.length ) {
        this.imgactiveNum = 0;
        return false;
      }
      if(this.imgactiveList1[this.imgactiveNum].filename == "1") {
        this.imgList.push({
          fileName: file.file.name,
          fileUrl: res.find('Location').text()
        })
        if(this.imgactiveList1.length > 1) {
          this.Upload1(this.imgactiveList1[this.imgactiveNum],2);
        } 
      }
      this.imgactiveNum ++;
  }
  this.$message({
    type: "success",
    message: "上传完成"
  });
  this.videoFlag = false;
};
this.xhr.send(ossData);
}

// 进度条
progressFunction(event) {
    // 设置进度显示
    if (event.lengthComputable) {
      var percent = Math.floor(event.loaded / event.total * 100);
      if (percent >= 100) {
        percent = 97;
      }
      this.videoUploadPercent = percent;
      this.imgactiveList[0].videoUploadPercent = percent;
    }
    this.videoFlag = true;
}

  // xml转换
  toXmlDom(source) {
    var xmlDoc = null;
    if (window.ActiveXObject) {
        var ARR_ACTIVEX = ["MSXML4.DOMDocument", "MSXML3.DOMDocument", "MSXML2.DOMDocument", "MSXML.DOMDocument", "Microsoft.XmlDom"];
        var XmlDomflag = false;
        for (var i = 0; i < ARR_ACTIVEX.length && !XmlDomflag; i++) {
            try {
                var objXML = new ActiveXObject(ARR_ACTIVEX[i]);
                xmlDoc = objXML;
                XmlDomflag = true;
            } catch (e) {
            }
        }
        if (xmlDoc) {
            xmlDoc.async = false;
            xmlDoc.loadXML(source);
        }
    } else {
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(source, "text/xml");
    }
    return xmlDoc;
}

记录一下每日技术