文件上传添加进度条，配合elementUI使用

 //文件上传
    upload(o, callback) {
        return httpRequest({
            url: `${uploadService}/file/upload`,
            method: "post",
            data: o,
            onUploadProgress: progressEvent => {
                // 对原生进度事件的处理
                if (progressEvent.lengthComputable) {
                    callback && callback(progressEvent);
                }
            }
        });
    },

<template>
  <el-progress type="line" v-show="isShowProgress" style="width:425px;" :stroke-width="6"
            :percentage="percentage"></el-progress>
          <el-upload v-if="formData.attachmentType == 'SINGLE'" accept=".doc,.docx,.pdf,.xls,.xlsx,.zip,.rar"
            class="upload-demo" drag action="/safemanage/ipinfo/upload" :beforeUpload="beforeAvatarUpload"
            :http-request="imgUpload" :on-success="handleproSuccess" :on-remove="removeFile" :limit="1"
            :file-list="fileList" :disabled="dis">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <span style="color: red;">上传文件前请删除列表中已有文件</span>
            <div class="el-upload__tip" slot="tip">
              <span>支持扩展名: .doc .docx .pdf .xls .xlsx,.zip,.rar</span><br />
            </div>
          </el-upload>
</template>

//data函数中定义的变量
data(){
return {
  percentage: 0,
  isShowProgress: false
   }
}


//  methods中的方法
imgUpload(param) {
        this.isShowProgress = true
        let formData = new FormData();
        formData.append("file", param.file);
        formData.append("fileClass", "MOOC_VIDEO");
        formData.append("isMd5", true);
        formData.append("fileName", param.file.name);
        api.upload(formData, progressEvent => {
          this.percentage = parseInt(
            (progressEvent.loaded / progressEvent.total) * 100
          );
        }).then(data => {
          if (data) {
            if (this.percentage == 100) {
              this.isShowProgress = false
              this.singleData.push({ attachmentId: data.id, attachmentName: data.fileName, index: 0, fileSize: data.fileSize })
            }
          }
        });
      },