Element-ui upload组件 上传文件类型限制

一、接受文件类型 accept=".pdf, .doc, .docx, .xls, .xlsx"，但是当选择弹出本地选择文件时候可以切换到所有文件，接受文件类型得不到限制

<el-form-item label="附件：" label-width="200px">
    <el-upload
      accept=".pdf, .doc, .docx, .xls, .xlsx"
      action="https://jsonplaceholder.typicode.com/posts/"
      :limit="1"
      :before-upload="beforeUpload"
      :on-success="upSuccess"
      :on-error="upError"
    >
      <el-button size="small" type="primary">
        <span class="iconfont icon-shangchuan" />上传文件
      </el-button>
    </el-upload>
    <span>上传文件只能是 pdf、doc、docx、xls、xlsx格式</span>
</el-form-item>

二、解决方法：上传之前 before-upload 判断文件类型 

before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

// this.$msg(); 为自定义全局提示
// 上传文件之前
beforeUpload(file) {
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

  const whiteList = ["pdf", "doc", "docx", "xls", "xlsx"];

  if (whiteList.indexOf(fileSuffix) === -1) {
    this.$msg("上传文件只能是 pdf、doc、docx、xls、xlsx格式", "error");
    return false;
  }

  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isLt2M) {
    this.$msg("上传文件大小不能超过 2MB", "error");
    return false;
  }
},
// 上传成功
upSuccess(e) {
  this.$msg("上传成功");
},
// 上传失败
upError(e) {
  this.$msg("上传失败", "error");
},