使用Element UI手動上傳單個文件並顯示進度條

場景描述

使用Element UI的upload組件手動上傳文件單個文件，如果選擇了多個文件，會覆蓋原來要上傳的文件，以最新選擇的文件爲準。上傳不使用upload組件自帶的上傳方式，而是使用axios上傳。

實現過程

部分做法參考自：https://www.cnblogs.com/lovemomo/p/11777608.html

首先upload的html代碼如下：

<el-upload
  class="upload-demo"
  ref="upload"
  action
  :before-upload="beforeUploadVideo"
  :on-change="handleChange"
  :file-list="fileList"
  :auto-upload="true"
>
  <el-button slot="trigger" size="small" type="primary"
    >選取文件</el-button
  >
</el-upload>

爲了只能選擇一個文件，我們需要利用on-change方法，始終令file-list保留最新的一項。並且，爲了能用axios上傳該文件，我們需要令auto-upload=true。雖然我們設置了upload組件自動上傳，但其實這是爲了該組件能執行before-upload方法，在該方法中，我們可以獲得最新選擇的文件的file對象，方便後面用axios上傳，然後在該方法內始終阻止upload組件的自動上傳。如果想要顯示進度條，參考https://blog.csdn.net/qq_36272282/article/details/104539860。
代碼如下所示：

export default {
  data() {
      fileList: [],
      ruleForm: {
        videoFile: ""
      }
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = [fileList[fileList.length - 1]];
    },
    beforeUploadVideo(file) {
      //上傳前回調
      var fileSize = file.size / 1024 / 1024 < 500;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("不支持此視頻格式");
        this.fileList = [];
      } else if (!fileSize) {
        this.$message.error("視頻大小不能超過500MB");
        this.fileList = [];
      } else {
        this.ruleForm.videoFile = file;
      }

      // 不使用upload自帶的上傳方式，而是使用axios，所以阻止upload自帶的上傳
      return false;
    },
    submitForm(formName) {
      // 這裏把提交表單方法綁定到指定按鈕中
      ...
      var params = new FormData();
      params.append("video_data", this.ruleForm.videoFile);
      ...
    }
  }
};

Element UI的upload組件自帶了部分動畫， 如果不想要這些動畫，可以利用>>>關鍵符號修改Element UI底層代碼：

<style lang="scss" scoped>

.upload-demo {
  display: flex;
}
>>> .el-list-enter-active,
>>> .el-list-leave-active {
  transition: none;
}

>>> .el-list-enter,
>>> .el-list-leave-active {
  opacity: 0;
}
>>> .el-upload-list {
  height: 40px;
}

</style>