【Element UI】el-upload 踩的坑

1、action

上传的地址，接口地址
直接在 action 中写后端地址会出现跨域问题，而且传参数不方便
就用 http-request 指定具体上传方法

2、auto-upload

是否在选取文件后立即进行上传，默认 true
在 action 赋空值，使用 http-request 指定方法上传时，auto-upload 为 false

3、http-request

覆盖默认的上传行为¹，可以自定义上传的实现
默认的上传方法均失效，获取不到 file 值
需要使用 on-change² 做上传文件前的处理

4、上传文件显示进度条

el-progress³

5、上传 .xls , .xlsx 文件并显示进度条的实现代码

<el-dialog
  ref=""
  append-to-body
  :title="excel.title"
  v-if="excel.visible"
  :close-on-click-modal="false"
  :visible.sync="excel.visible"
>
  <el-upload
    class="upload-demo"
    ref="upload"
    action=""
    :limit="1"
    :auto-upload="false"
    :file-list="excel.upload.fileList"
    :on-change="excelChange"
    :http-request="excelRequest"
    :on-remove="excelRemove"
  >
    <el-button icon="el-icon-upload2" plain @click="excelReset">{{ st('frame.choiceFile') }}</el-button>
    <div slot="tip" class="el-upload__tip">只能上传 .xlsx 和 .xls 文件，且不超过1个文件</div>
  </el-upload>
  <el-progress v-show="excel.progressFlag" :percentage="excel.loadProgress"></el-progress>
  <div ref="uploadFile"></div>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="cancel()">{{st('frame.cancel')}}</el-button>
    <el-button type="success" @click="submitFile()">{{st('publicCustom.ok')}}</el-button>
  </div>
</el-dialog>
data() {
	return {
      excel: {
        title: this.st('frame.import'),
        visible: false,
        progressFlag: false,
        loadProgress: 0,
        upload: {
          fileList: [],
          action: '',
          headers: {},
          data: {
            jsondata: ''
          }
        }
      }
   }
}
methods: {
	excelReset() {
      this.excel.upload.fileList = []
      this.$refs.uploadFile.innerHTML = null
    },
    excelRemove() {
      this.excel.upload.fileList = []
      this.excel.progressFlag = false
      this.$refs.uploadFile.innerHTML = null
      this.excel.loadProgress = 0
    },
    excelChange(file) {
      if (file.name.indexOf('.xlsx') == -1 && file.name.indexOf('.xls') == -1) {
        this.$message.error(this.st('frame.uploadError'))
        this.excel.upload.fileList = [] 
      } else {
        if(file.status === 'ready'){
          this.excel.progressFlag = true
          this.excel.loadProgress = 0
          const interval = setInterval(() => {
            if(this.excel.loadProgress >=99){
              clearInterval(interval)
              return
            }
            this.excel.loadProgress += 1
          }, 20)
        }
        this.excelRequest(file)
      }
    },
    excelRequest(file) {
      var form = new FormData()
      form.append("file", file.raw)
      InportPbomPartExcel(form).then((res) => {
        if (res.resultData.success) {
          const url = settings.api.url + res.resultData.fileName
          window.open(url)
          let template = res.resultData.MessageString
          this.$refs.uploadFile.innerHTML = template
          this.excel.progressFlag = false
          this.excel.loadProgress = 100
        } else {
          this.$message.error(res.resultData.MessageString)
        }
      })
    }
}

---

1. on-preview 点击文件列表中已上传的文件时的钩子
   on-success 文件上传成功时的钩子
   on-progress 文件上传时的钩子
   before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 ↩︎

2. on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 ↩︎

3. <el-upload 
    action="Fake Action" :before-upload="uploadSuccess" :on-change="uploadVideoProcess" :show-file-list="false" :file-list="fileList">
    <el-button v-if="typePage !=='view'" size="mini" type="primary">点击上传</el-button>
    <span v-if="typePage !=='view'" slot="tip" class="el-upload__tip">支持pdf,jpg,png格式文件</span>
   </el-upload>
   <el-progress v-show="progressFlag" :percentage="loadProgress"></el-progress>
   
   uploadVideoProcess(file, fileList) { 
      if(file.status === 'ready'){
         this.progressFlag = true; // 显示进度条
         this.loadProgress = 0; 
         const interval = setInterval(() => {
           if(this.loadProgress >=99){
             clearInterval(interval)
             return
           }
           this.loadProgress += 1
         }, 20);
       }
     if (file.status === 'success') {
       this.progressFlag = false; // 不显示进度条
       this.loadProgress = 100;
     }
   }
   

   ↩︎