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;
}
複製代碼

記錄一下每日技術