(vue)vue2实现导入excel文件功能


在这里插入图片描述


代码:

<el-form-item>
  <el-upload
    ref="upload2"
    class="upload-demo"
    action
    accept=".xlsx"
    :before-upload="beforeFileOwl"
    :http-request="httpRequestOwl"
    :show-file-list="false"
  >
    <el-button type="primary">导入</el-button>
  </el-upload>
</el-form-item>

js:

//上传之前格式校验
beforeFileOwl(file) {
  const fileName = file.name;
  const fileType = fileName.substring(fileName.lastIndexOf("."));
  if (fileType === ".xlsx") {
    this.flag = true;
  } else {
    this.$Message.error("上传类型错误,请选择xlsx文件");
    return false;
  }
},
//xlsx
httpRequestOwl(param) {
  if (this.flag) {
    let file = param.file;
    let formData = new FormData();
    formData.append("file", file);
    importSemesterCourse(formData).then((res) => {
      if (res.code === 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    });
  }
},

更多推荐