【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 =falsethis.$refs.uploadFile.innerHTML =nullthis.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 =truethis.excel.loadProgress =0const interval =setInterval(()=>{if(this.excel.loadProgress >=99){clearInterval(interval)return}this.excel.loadProgress +=1},20)}this.excelRequest(file)}},excelRequest(file){var form =newFormData()
      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 =falsethis.excel.loadProgress =100}else{this.$message.error(res.resultData.MessageString)}})}}