vue使用upload上传文件excel，txt,csv文件并且预览（数据后端处理，前端el-table预览）_vue csv文件预览

            <el-upload class="upload-demo" action="http://localhost:40822/quotaSampling/upload"
            :on-success="updateSuccess" :on-preview="handlePreview" :on-remove="handleRemove"
            :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList">
            <el-button size="small" type="primary">点击上传文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xlsx,xls,csv,txt格式文件!</div>
          </el-upload>
  <el-table
    :data="tableData"
    border
    :stripe="true"
    :current-page.sync="excelCurrentPage"
    style="width: 100%">
            <el-table-column
              v-for="(s, i) in head"
              :prop="i + ''"
              :label="s"
              :key="i">
            </el-table-column>
  </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

后端返回格式，el-table中使用数据 tableData以及head都是数组

 // 上传成功后的钩子函数
    updateSuccess(response) {
      // 获得解析成功后的文件ID
      this.fileId = response.data;
      console.log(this.fileId);
      axios
        .get("http://localhost:40822/quotaSampling/getDataAll/" + this.fileId)
        .then((res) => {
          if (res.data.code === 200) {
            var ret = res.data.data;
            this.head = ret.head;
            this.tableData = ret.data;
            this.excelTotal = ret.data.length
            console.log(res)
          }
        });

      // 跳到下一步流程
      this.active++;
    },
      handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
      handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`
      );
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39