el-upload 上传excel

      <el-dialog
        :title="'导入'"
        :visible.sync="dialogVisibleImport"
        width="400px"
        v-loading="importloading"
        element-loading-text="数据导入中"
        :close-on-click-modal="false"
        class="daoruBox"
      >
        <!-- 第一种上传方式 -->
        <el-form label-width="100px">
          <el-form-item>
            <el-button type="primary" @click="download()">下载模板</el-button>
            <el-button type="primary" @click="importExcel()">导入文件</el-button>
            <input
              ref="file"
              type="file"
              accept=".xlsx, .xls"
              style="display: none;"
              @change="uploadFile"
            />
          </el-form-item>
        </el-form>

        <!-- 第二种el-upload上传方式 -->
        <el-upload
          class="upload-demo"
          list-type="text"
          accept=".xls, .xlsx"
          :action="UploadUrl()" 
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :auto-upload="false"
          :file-list="fileList"
        >
          <el-button type="success" icon="el-icon-upload2">上传Excel表格111</el-button>
          <div class="el-upload__tip" slot="tip">只能上传xlsx、xls文件，且不超过10m</div>
        </el-upload>
        
        <!-- 第三种 el-upload  手动导入-->
        <el-upload
          class="upload-demo"
          ref="upload"
          list-type="text"
          accept=".xls,.xlsx"
          action="UploadUrl()"
          :on-change="handleChange"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">导入文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">* 只能上传xlsx/xls文件，且不超过20M</div>
        </el-upload>

        <el-select v-model="importExceRoleVal" placeholder="请选择">
          <el-option
            v-for="item in importExceRoleOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        
      </el-dialog>

<script>
import {
  importExcel
} from "./api";

export default {
  data() {
    return {
      fileList: [],
      importExceRoleOpt: [{
          value: '1',
          label: '开发人'
        }, {
          value: '2',
          label: '医生'
        }, {
          value: '5',
          label: '客服经理'
        }, {
          value: '6',
          label: '推广人'
        }, {
          value: '8',
          label: '客服专员'
        },{
          value: '15',
          label: '激活人'
        }
      ],
      importExceRoleVal: '',
      dialogVisibleImportMsgBox:false,
      dialogVisibleImportMsg:'',
      importRes:[]
    };
  },

  methods: {
    download() {
      window.location.href =
        "http://" + window.location.host + "/importByIdGs.xlsx";
    },
    // 第一种上传方式   =========== 上传文件 =============
    async uploadFile(e) {
      const file = this.$refs.file.files;
      var extName = file[0].name
        .substring(file[0].name.lastIndexOf("."))
        .toLowerCase();
      if (extName === ".xlsx" || extName === ".xls") {
        var formData = new FormData();
        formData.append("file", file[0]);
        this.importloading = true;
        console.log("formData==============", formData);
        importExcel(formData)
          .then(res => {
            if (res == "true") {
              this.$message.success("数据导入成功");
              this.$refs.query.reload();
            } else {
              this.$message.error("数据导入失败");
            }
            this.importloading = false;
            this.dialogVisibleImport = false;
            e.target.value = "";
          })
          .catch(err => {
            this.importloading = false;
            this.dialogVisibleImport = false;
            e.target.value = "";
          });
      } else {
        this.$message.error("数据导入失败，请选择正确的xlsx模板文件");
      }
    },
    importExcel() {
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
    },

    // 第二种  el-upload  ========== 的上传 ===============
    // 确定上传
    handleUploadFile() {
      // 如果上传的文件列表是空的，给出提示
      if (this.fileList.length === 0) {
        return this.$message.warning("请先选择要上传的文件");
      }

      // 因为我们限制一次只上传1个文件，所以取数组里的第一个就可以了
      let file = this.fileList[0];
      // 获取到文件的后缀以便于判断文件类型
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      // 获取到文件的大小
      let size = file.size / 1024 / 1024;
      // 判断文件类型
      if (extension !== "xlsx" && extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx或者.xls的文件");
        return;
      }
      // 限制上传文件的大小
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
        return;
      }
      // 把文件转成FormData格式上传
      let dataFile = new FormData();
      dataFile.append("file", this.fileList[0]);
      // 设置请求头的 Content-type
      let config = {
        headers: {
          "Content-type": "multipart/form-data"
        }
      };
      // // 发起请求
      // this.$http.post('/orderIdCard/upload',dataFile,config).then(res =>{
      //     if(res.data.code != 200 ){
      //         return this.$message.error(res.data.msg)
      //     }
      //     this.$message.success('上传成功')
      //     this.dialogVisible = false
      // })

      importExcel(dataFile)
        .then(res => {
          if (res == "true") {
            this.$message.success("数据导入成功");
            this.$refs.query.reload();
          } else {
            this.$message.error("数据导入失败");
          }
          this.importloading = false;
          this.dialogVisibleImport = false;
          e.target.value = "";
        })
        .catch(err => {
          this.importloading = false;
          this.dialogVisibleImport = false;
          e.target.value = "";
        });
    },
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        handleChange(file, fileList){
            this.fileList.push(file.raw)
            this.handleUploadFile()
        },
        // 文件超出个数限制时的钩子
        handleExceed(file,fileList) {
            return this.$message.warning('一次只能上传一个文件哦~')
        },
        //因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
        UploadUrl() {
            return ""
        },
        // 文件列表移除文件时的钩子
        handleRemove(file,fileList) {
            this.fileList = fileList
        },
        
        
    // 第三种 el-upload  手动导入 ======= 手动上传 =========
    // 确定上传
    handleUploadFile(){
      if(this.fileList.length === 0 ){
        return this.$message.warning("请选择要上传的文件");
      }
      if(this.importExceRoleVal == "" ){
        return this.$message.warning("请选择导入对象!");
      }
      let file = this.fileList[0];
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx" && extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx或者.xls的文件");
        return;
      }
      // 限制上传文件的大小
      if( size > 20 ){
        this.$message.warning("文件大小不得超过20M");
      }
      let formData = new FormData();
      formData.append("file",this.fileList[0]);
      formData.append("indentureType", this.importExceRoleVal)
      // let config = {
      //   headers: {
      //     "Content-type": "multipart/form-data"
      //   }
      // };
      importExcel(formData)
          .then(res => {
            this.dialogVisibleImportMsg = res.msg
            this.dialogVisibleImportMsgBox = true
            this.importRes = res.data
            if ( res.code == 200 ) {
              this.$refs.query.reload();
            }
            this.importloading = false;
            this.dialogVisibleImport = false;
          })
          .catch(err => {
            this.importloading = false;
            this.dialogVisibleImport = false;
          });
    },

    submitUpload(){
      this.handleUploadFile()
    },
    handleBefore(file){
    },
    handleChange(file,fileList){
      // this.fileList.push(file.raw)
      let ary = []
      ary.push(file.raw)
      this.fileList = ary
    },
    uploadUrl(){
      return ""
    }
        
        
        
  }
};
</script>

参考：blog.csdn.net/qq_47556649… www.jianshu.com/p/c83722405…