实现上传Excel表格先预览内容再传到服务器的方法↓↓↓

业务需求：

业务要求实现上传Excel表格后先预览看看数据是否准确，确认无误后调用接口，见下图：

代码

html代码

<div class="mb-4">
     <el-button type="primary" @click="dialogShow">新增</el-button>
        <el-upload
          action
          accept=".xlsx,.xls"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handle"
          :on-success="successUpload"
        >
          <template #trigger>
            <el-button type="primary">Excel批量导入</el-button>
          </template>              
        </el-upload>
        <el-dialog
          :append-to-body="false"
          :modal="true"
          v-model="reactiveData.dialogTip"
          :title="reactiveData.title1"
          width="800"
          modal-class="dialogBack"
          align-center>
            <div class="el-upload__tip text-red">
                <el-table
                  :data="tableData"
                  table-layout="fixed"
                >
                  <!-- 上面对中文字段进行转化主要就是为了绑定这个prop -->
                  <el-table-column
                    v-for="(item, index) in title"
                    :key="index"
                    :prop="'in' + index"
                    :label="item"
                  />
                </el-table>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="reactiveData.dialogTip = false">取消</el-button>
                <el-button type="primary" @click="uploadInterface">
                  添加
                </el-button>
              </div>
            </template>

        </el-dialog>  

    <el-button type="primary" @click="deleteBlock">删除</el-button>
 </div>

js代码

const reactiveData = reactive({ 
  form: {
    addData: [
    {
      "entName": "",
      "creditCode": "",
      "pName": ""
    }
  ],
  },
  dialogTip: false,
  title1: '数据列表',
})


function readFile(file) {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
}

const title = ref([]); //表头
const tableData = ref([]); //数据列表

// 选择文件的方法
const handle = async (ev) => {
  reactiveData.dialogTip = true
  //每次选择文件都把之前文件清空
  title.value = [];
  tableData.value = [];
  let file = ev.raw; //这里面就是数据
  // 将file变成二进制读取到的
  let data = await readFile(file);
  // 将得到的二进制转化一下
  let workbook = XLSX.read(data, { type: "binary" });
  // 最后把数据转成json格式的
  let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //这里是表格的名字,这里取第一个表格,1就是第二个表格数据
  //将得到的worksheet转化为json格式
  data = XLSX.utils.sheet_to_json(worksheet);
  // 这个是表格所有的标题
  for (const key in data[0]) {
    title.value.push(key); //获取的是标题,即每个对象的键名
  }
  //将得到的json数据转化一下(因为excel表格的数据都是汉字,但是我们需要绑定的属性是字母,因此需要转换下)
  //这种可以动态的根据内容生成表格的英文键
  //对其进行转化目的是为了绑定下面表格的的prop
  reactiveData.form.addData = []
  data.forEach((item, index) => {
    reactiveData.form.addData.push({
     "entName": "",
     "creditCode": "",
     "pName": ""
   })
    let obj = {};
    title.value.forEach((item2, index2) => {
      // 表格显示数据的处理
      obj["in" + index2] = item[item2];
      // 接口入参处理
      switch (index2){
        case 0: reactiveData.form.addData[index].entName = item[item2]
        break;
        case 1: reactiveData.form.addData[index].creditCode = item[item2]
        break;
        case 2: reactiveData.form.addData[index].pName = item[item2]
        break
      }

    });
    tableData.value.push(obj);
  });
};


// 点击批量添加按钮
function uploadInterface(){
  reactiveData.dialogTip = false
  // 调用添加接口方法(这个方法的代码未展示)
  addBlack() 
}