表單中的 ui

<el-form-item label="課程檔案" :label-width="formLabelWidth">
    <el-upload
            :show-file-list="false"
            :file-list="playUrls"
            :http-request="uploadSectionFile"> <!--此處使用自定義上傳實現http-request-->
        <el-button size="small" type="primary"
 
>點選上傳</el-button>
        <el-tag v-show="showSectionFileName" type="gray">{{sectionFileName}}</el-tag>
        <div slot="tip" class="el-upload__tip">請等待進度條100%之後再提交表單</div>
    </el-upload>
    <el-progress v-show="showProgress" :text-inside="true" :stroke-width
 
="18"
                 :percentage="uploadPercent"></el-progress>
</el-form-item>

http-request指向的函式會有一個element 的預設回撥引數 定義為param.裡面包含很多東西,可以自己debug檢視
param.file就是要上傳的檔案

uploadSectionFile: function (param) { //自定義檔案上傳
    var fileObj = param.file;
    // 接收上傳檔案的後臺地址
    var FileController = "/file/item/upload"
 
;
    // FormData 物件
    var form = new FormData();
    // 檔案物件
    form.append("file", fileObj);
    // 其他引數
    form.append("xxx", xxx);
    // XMLHttpRequest 物件
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.upload.addEventListener("progress", vm.progressFunction, false); //監聽上傳進度
    xhr.onload = function () {
        vm.Form.playUrl = xhr.response; //接收上傳到阿里雲的檔案地址
        vm.$message({
            message: '恭喜你，上傳成功!',
            type: 'success'
        });
    };
    xhr.send(form);
},

監聽上傳進度中指定的函式,此函式在上傳過程中會一直執行,所以通過 i來控制只執行一次

progressFunction: function () {
  if (vm.i == 0) { //控制上傳中狀態只執行一次上傳
        vm.showStatus();
        vm.showProgress = true;
        vm.i = 1;
    }
},

定時查詢上傳進度 uploadPercent是上傳進度

showStatus: function () { 
    var intervalId = setInterval(function () {
        $.get("/file/item/percent", {}, function (data) {
            var percent = data;
            if (percent >= 100) {
                clearInterval(intervalId);
                percent = 100;//不能大於100
                vm.uploadPercent = percent;
                vm.resetPercent(); //在文章開頭的上篇文章中有此函式,用於重置後臺的上傳進度
            }
            vm.uploadPercent = percent;
        }, "json");
    }, 1000);
},