vue项目使用element组件上传excel文件 - 爱喝可乐的靓仔 - 博客园

vue项目中使用element-ui实现excel表格上传_悦度空间-CSDN博客

<button @click="impoortExcel">导入excel文件</button>
<!-- 导入模板文件 -->
    <el-dialog
      title="导入模板文件"
      :visible.sync="fileDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :before-close="handleDialogClose"
      center
    >
      <el-upload
        style="min-height: 40vh"
        ref="upload"
        name="file"
        :limit="1"
        :auto-upload="false"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
        action
        :on-exceed="handleExceed"
        :file-list="filelist"
        :on-change="handleChansge"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="postfile"
          :disabled="btn.disable"
          >{{ btn.message }}</el-button
        >
        <div
          slot="tip"
          class="el-upload__tip"
          style="margin-top: 20px; font-size: 14px"
        >
          上传文件只能为excel文件，且为xlsx,xls格式
        </div>
      </el-upload>
      <!--此处可以写导入时出现的详细错误信息，包含第几行出现问题显示出来-->
      <div v-for="item in errmesg" :key="item.message" class="text item">
        {{ item.message }}
      </div>
    </el-dialog>

 data:

data() {
  return {  
   fileDialogVisible: false,
      //文件
      file: "",
      filename: "",
      filelist: [],
      errmesg: [],
      btn: {
        disable: false,
        message: "开始上传",
      },
   }
}

弹窗：

//打开弹窗 
impoortExcel() {
      let that = this;
      that.fileDialogVisible= true;
},

//关闭弹窗 移除数据
    handleDialogClose() {
      this.filelist = [];
      this.file = "";
      this.fileDialogVisible = false;
    },

选择文件，上传文件方法

请求方法

import request from 'utils/fetch';

export function toLead(params) {
    return request({
        url: '/api/pu/unite/import/data',
        method: 'post',
        data: params,
        headers: { "Content-Type": "multipart/form-data" }
    });
}

import { toLead} from "@/api/lead/index"; //引入

handleExceed(files, fileList) {
      // 判断是否只能上传一个文件，超过提示报错
      console.log(e);
      this.$notify.error({
        title: "错误",
        message: "只能上传一个文件哦",
      });
    },
    handleChansge(file, fileList) {
      console.log(file);
      let name = file.name;
      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$notify.error({
          title: "错误",
          message: "上传文件只能为excel文件，且为xlsx,xls格式",
        });
        this.filelist = [];
        this.file = "";
        return false;
      }
      this.file = file.raw;
      this.filename = file.name;
    },
    postfile() {
      let that = this;
      if (that.file == "") {
        that.$notify.error({
          title: "错误",
          message: "上传文件不能为空"
        });
        return false;
      } else {
        // 文件形式的需要用 formData形式
        let formData = new FormData();
        formData.append("file", this.file);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        this.btn.disable = true;
        this.btn.message = "上传中，请等待";
        // this.$axios1.post(url, formData, config); //也可以这种 我这里是封装的
        uploadClue(formData)
          .then(function(response) {
            console.log(response);
            that.$notify({
              title: "上传成功",
              message: response.msg,
              type: "success"
            });
            that.filelist = [];
            that.btn.disable = false;
            that.btn.message = "上传服务器";
            that.fileDialogVisible = false;
            that.getList()
          })
          .catch(err => {
            that.btn.disable = false;
            that.btn.message = "上传服务器";
            that.fileDialogVisible = false;
            that.$notify.error({
              title: "错误",
              message: "上传过程出错啦"
            });
          });
      }
    },