vue +elementui上传文件

运用vue上传文件，实现效果如下：

 我这里是用vue+elementui来写的，组件代码：

<template>
  <div id="foldClass">
    <el-dialog title="导入XX" :visible.sync="isFoldClass" width="30%" center>
      <el-form ref="foldForm" label-width="0px" class="demo-ruleForm">
        <el-form-item>
          <div class="foldtxt">
            <a class="foldclass">EXCEL:</a>
            <el-input v-model="foldName" placeholder="XX名称" class="foldname"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="foldbtn1">
            <el-upload
              name="file"
              type="file"
              id="file"
              class="upload-demo"
              ref="upload"
              action="doUpload"                       
              :on-change="importChanage"
              :file-list="fileList"
              :limit="1"
              :on-exceed="exceedList"
              :before-upload="beforeUpload"
              :multiple="false"
              :auto-upload="false"
              :http-request="upLoad"
            >
              <el-button slot="trigger" size="middle" type="primary">选取文件</el-button>
              <el-button style="margin-left: 5px;" size="middle" type="success">
        <!--注意， 这里的a链接为下载模板的链接 -->
                <a
                  href="http://www.xx.download?"
                  target="_blank"
                  style="color:#fff;"
                >下载模板</a>
              </el-button>
              <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过1M</div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isFoldClass = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "foldClass",
  data() {
    return {
      files:'',
      fileName:'',
      extension:false,
      extensionTwo :false,
      isFoldClass: false, //导入班级弹出框
      foldName: "",
      fileList: [] //上传文件的列表
    };
  },
  created() {},
  methods: {
    //文件上传之前
beforeUpload(file) {
this.$refs.upload.clearFiles(); //清空之前选中的值
this.files = file;
this.fileName = file.name;
this.extension = file.name.split(".")[1] === "xls";
this.extensionTwo = file.name.split(".")[1] === "xlsx";

// console.log(file.name.endsWith("xls"),"123") 

//判断所上传文件大小
const isLt1M = file.size / 1024 / 1024 < 1;
// console.log(isLt1M,file.size);
if (!isLt1M) {
this.$message.warning("上传模板大小不能超过 1M!");
return;
}
return true; // 返回false不会自动上传
},
upLoad() {
if(this.extension || this.extensionTwo ){
  // console.log("上传" + this.files.name);
  let fileFormData = new FormData();
  fileFormData.append("file", this.files, this.fileName);
  let requestConfig = {
  headers: {"Content-Type": "multipart/form-data" }
  };
  this.$api.IMPORT_CLASS( '',fileFormData, requestConfig).then(res => {//这里请求后台返回的上传文件的接口
    if(res.data.errcode==0){
        this.$message({
                showClose: true,
                message: `${res.data.msg}`,
                type: "success",
                center: true
              });
    }else{
        this.$message({
                showClose: true,
                message: `${res.data.error}`,
                type: "error",
                center: true
              });
    }
  }). catch(err=>{
    console.log(err);
  })
}else{
  this.$message({
  message: "上传文件只能是xls/xlsx格式!",
  type: "warning",
  offset: 200,
  duration: 3000,
  showClose: true
  });
  this.$refs.upload.clearFiles(); //清空之前选中的值
}
},
    toFoldClass() {
      this.isFoldClass = true;
    },
    importChanage(info, fileList) {
      if (info.status === "success") {
        this.$message.success("上传成功！");
      } else if (info.status === "error") {
        this.$message.error(`${info.response.message}`);
      }
    },
    submitUpload() {
      (this.isFoldClass = false), this.$refs.upload.submit();
    },
    exceedList() {
      this.$refs.upload.clearFiles(); //清空之前选中的值
      this.$message.error("一次最多只可上传一个文件！");
    }
  }
};
</script>


 <style lang='less' scoped>
#foldClass {
  .foldtxt {
    width: 202px;
    height: 40px;
    line-height: 40px;
    margin: auto;
  }
  .foldclass {
    display: block;
    border: 1px solid #ebeef5;
    border-right: 0 solid #ebeef5;
    width: 100px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    float: left;
  }
  .foldname {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    .el-input__inner {
      border-radius: 0;
    }
  }
  .foldbtn1 {
    width: 202px;
    height: 40px;
    margin: 14px auto;
  }
  .foldbtn3 {
    width: 202px;
    height: 40px;
    margin: 50px auto;
  }
  .foldbtn2 {
    width: 202px;
    height: 40px;
  }
  .dialog-footer {
    padding: 23px 20px 20px !important;
  }
}
</style>