上传文件(element ui)

<el-form-item style="margin-left:69px;" prop="file">
   <div style="color:#404040;"><span style="color:#F56C6C;margin-right:4px;">*</span>请选择导入的Excel文件：</div>
      <div style="display:flex;">

         <div @click="handelup">
             <el-button type="primary">选择文件</el-button>
             <input type="file"  accept=".xlsx, .xls" class="ivu-upload-input" ref="filei" id="multipartFile" v-on:change="up">
          </div>

           <el-input v-model.trim="form.file" placeholder="未选择任何文件" disabled style="width:300px;margin-left: 16px;" ></el-input>

            <a href="https://static.towatt.com:9106/cecbill/平台对账数据导入模板.xlsx" style="margin-left:10px;">
                    <span class="underLine">下载模板</span>
             </a>
    </div>
</el-form-item>

上面页面样式

以下实现效果

    // 间接调用文件选择框
    handelup(e) {
      console.log(e)
      this.$refs.filei.dispatchEvent(new MouseEvent("click"));
    },
    up(e){
      console.log(e.target.files[0]);
      this.form.file = e.target.files[0].name;
      // 获取待上传的文件对象
      let file = e.target.files[0];
      // 声明一个读取文件对象
      let reader = new FileReader();
      // 开始读取文件内容
      reader.readAsDataURL(file);
      // 读取操作结束时触发
      reader.onloadend = ev => {
        // 赋值给vue对象属性
        this.form.multipartFile = e.target.files[0];
      };
    },