vue+element上传excel文件

<template>
  <div>
    <el-dialog title="请导入IC卡号" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="小区名称:">
          <el-select
            filterable
            clearable
            placeholder="请选择小区名称"
            v-model="form.icName"
          >
            <el-option
              v-for="item in communityList"
              :label="item.communityName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="verifyForm">确 定</el-button>
      </div>
      <div>
        <el-upload
          action=""
          :multiple="false"
          :limit="1"
          :http-request="upload"
          :auto-upload="false"
          accept=".xls"
          :file-list="fileList"
          ref="upload"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <p class="angerText SmallText">*导入时请勿关闭此页面；</p>
        <p class="angerText SmallText">
          *导入说明：IC卡限制为M1卡，录入的为IC卡 序列号的ID
        </p>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="verifyForm">导 入</el-button>
          <el-button type="primary" @click="downloadForm">下载模板</el-button>
        </span> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    
    
  components: {
    
    },
  data() {
    
    
    return {
    
    
      dialogFormVisible: false, //上传弹窗
      form: {
    
    
        icName: "", //卡号
      },
      formLabelWidth: "120px", //上传弹窗的弹窗尺寸
      //上传文件
      fileList: [],
      communityList: [],
    };
  },
  mounted() {
    
    
    this.getCommunityInfo();
  },
  methods: {
    
    
    //获取小区列表id
    getCommunityInfo() {
    
    
      this.$http
        .request("communityList", {
    
    })
        .then((data) => {
    
    
          console.log(data);
          this.communityList = data.data.data||[];
          console.log(this.communityList);
        })
        .catch(() => {
    
    });
    },
    changeVisible() {
    
    
      this.dialogFormVisible = true;
    },
    handleClose(done) {
    
    
      this.$emit("close");
      done();
    },
    // 显示
    setShow() {
    
    
      this.form = {
    
    };
    },
    // 验证
    verifyForm() {
    
    
      console.log(this.$refs.upload);
      this.$refs.upload.submit();
      this.dialogFormVisible=false
    },
    // //下载
    // downloadForm() {
    
    
    //   let params = this.form;
    //   this.$http
    //     .request("getMobileQR", params)
    //     .then((data) => {
    
    
    //       this.$message({
    
    
    //         type: "success",
    //         message: `下载成功!`,
    //       });
    //     })
    //     .catch((err) => {});
    // },
    // 上传
    upload(a, b, c, d) {
    
    
      // exportResidentsQrDialog
      let form = new FormData();
      form.append("file", a.file);
      form.append("communityId ", this.form.icName);
      console.log(a, b, c, d);
      let params = form;
      this.$http
        .request("insertIcCard", params)
        .then((data) => {
    
    
          console.log(data);
        })
        .catch(() => {
    
    });
      // submit() {
    
    
      // this.$http
      //   .request("insertIcCard", this.formInline)
      //   .then((data) => {
    
    
      //     console.log(data);
      //   })
      //   .catch(() => {});
      // },
    },
  },
};
</script>
<style scoped lang="scss"></style>