Vue 与 Element—原生的input文件上传执行流程

Vue 与 Element

原生的input文件上传执行流程

<template>
  <div>
   <input type="file" id="_ef" style="visibility:hidden" />
   <el-button @click="handleCick">上传</el-button>
  </div>
</template>

<script>
  export default {
    data(){
      oldUrl:"", //旧文件地址
    },
    methods:{
      handleClick() {
        //绑定文件改变时的处理事件
        document.getElementById("_ef").onchange = this.doUpload 
        document.getElementById("_ef").click()
        var f = document.getElementById("_ef");
      },
      doUpload(e) {
        if(this.oldUrl) {
          //如果存在原有的文件则在这里删除
        }
        //获取文件参数
        var f = document.getElementById("_ef");
        let imgfile = f.files[0]
        let imgParams = {
          file: imgfile,
          name: imgfile.name,
          totalSize: imgfile.size,
          type: imgfile.type,
        }
        //执行上传接口
        this.axiosUploadFile(imgParams)  
      },
      axiosUploadFile(img) {
        
      }
    }
  }
</script>