前端文件导入(FormData形式)，并隐藏原input file标签后面的提示文字

效果图

导入数据按钮

点击后，弹出文件选择，最后选择文件进行导入

原理

用el-button来代替原生的input标签显示，设置input标签样式为display: none; 在点击el-button按钮时，获取input元素，并触发其点击事件

html代码

<el-button size="mini" type="primary" @click="toImport">导入数据</el-button>
<input type="file" @change="importFile" style="display:none">

js代码

//点击触发数据导入
toImport() {
  //获取隐藏的input
  const inputFile = document.querySelector("input[type='file']");
  //触发其点击事件, 弹出文件选择
  inputFile.click();
},
//开始导入数据
importFile(upfile) {
  //获取上传的文件
  const file = upfile.target.files[0];
  let data = new FormData();
  data.append('file', file);
  //接口请求
  api.importData(data).then(res => {
    console.log(res);
    if(res.data.status == 200) {
      this.$message.success('导入成功');
      this.selectData(false);
    } else {
      this.$message.warning('导入失败');
    }
  })
},

以上即可完成任务